Buttons

Core interactive elements that inherit theme tokens and transitions across 5 size tiers.

Interactive Preview

<button flip-size="xs">Extra Small</button>
      <button flip-size="sm">Small</button>
      <button>Default Medium</button>
      <button flip-size="lg">Large</button>
      <button flip-size="xl">Extra Large</button>
      <button flip-variant="primary">Primary Coral</button>
      <button flip-variant="secondary">Secondary Blue</button>
      <button flip-variant="tertiary">Tertiary Purple</button>
      <button flip-variant="success">Success Emerald</button>
      <button flip-variant="danger">Danger Crimson</button>
      <button flip-variant="warning">Warning Amber</button>
      <button flip-variant="information">Info Sky</button>
      <button flip-size="sm" flip-variant="success">Small Success</button>
      <button flip-size="lg" flip-variant="danger">Large Danger</button>
      <button disabled>Disabled State</button>
      <button aria-disabled="true" flip-variant="secondary">Aria Disabled</button>