Buttons

Premium, enterprise-grade buttons with consistent variants, loading behavior, icon ergonomics, RTL-safe spacing, and reduced-motion support. Use the global theme switcher to preview Light/Dark — all examples here are token-driven and will adapt automatically.

Default Buttons

All core variants (ALL colors + styles). Use variants to communicate intent and hierarchy; avoid ad-hoc styling in product code.

Show code

import { Button } from '@/design-system/components/Button';

export function Example() {
  return (
    <>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="success">Success</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="neutral">Neutral</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="soft">Soft</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="danger-ghost">Danger Ghost</Button>
      <Button variant="link">Link</Button>
      <Button variant="gradient">Gradient</Button>
    </>
  );
}

Outline Buttons

High-clarity, low-fill actions. Ideal for toolbars, tables, and secondary CTAs.

Show code

import { Button } from '@/design-system/components/Button';

function IconPlus() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function IconArrowRight() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path
        d="M7.5 4.5L13 10l-5.5 5.5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function Example() {
  return (
    <>
      <Button variant="outline">Outline</Button>
      <Button variant="outline" pill>Outline Pill</Button>
      <Button variant="outline" full>Full Width Outline</Button>
      <Button variant="outline" loading>Loading Outline</Button>
      <Button variant="outline" leadingIcon={<IconPlus />}>Add</Button>
      <Button variant="outline" trailingIcon={<IconArrowRight />}>Next</Button>
    </>
  );
}

Border Buttons

Border-forward and minimal-fill actions for dense interfaces (tables, toolbars, inline actions).

Show code

import { Button } from '@/design-system/components/Button';

export function Example() {
  return (
    <>
      <Button variant="ghost">Ghost</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="danger-ghost">Danger Ghost</Button>
      <Button variant="neutral">Neutral</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

Rounded Buttons

Pill geometry for chips, premium CTAs, and segmented surfaces. Applies to ALL variants.

Show code

import { Button } from '@/design-system/components/Button';

export function Example() {
  return (
    <>
      <Button variant="primary" pill>Primary</Button>
      <Button variant="secondary" pill>Secondary</Button>
      <Button variant="success" pill>Success</Button>
      <Button variant="warning" pill>Warning</Button>
      <Button variant="danger" pill>Danger</Button>
      <Button variant="neutral" pill>Neutral</Button>
      <Button variant="ghost" pill>Ghost</Button>
      <Button variant="soft" pill>Soft</Button>
      <Button variant="outline" pill>Outline</Button>
      <Button variant="danger-ghost" pill>Danger Ghost</Button>
      <Button variant="link" pill>Link</Button>
      <Button variant="gradient" pill>Gradient</Button>
    </>
  );
}

Soft Buttons

Low-noise tertiary CTAs. Token-driven (CSS-variable safe) and designed for calm surfaces.

Show code

import { Button } from '@/design-system/components/Button';

function IconPlus() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function IconArrowRight() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path
        d="M7.5 4.5L13 10l-5.5 5.5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function Example() {
  return (
    <>
      <Button variant="soft">Soft</Button>
      <Button variant="soft" pill>Soft Pill</Button>
      <Button variant="soft" loading>Soft Loading</Button>
      <Button variant="soft" leadingIcon={<IconPlus />}>Add</Button>
      <Button variant="soft" trailingIcon={<IconArrowRight />}>Continue</Button>
    </>
  );
}

Ghost Buttons

Transparent baseline with subtle affordance for toolbars, tables, and inline actions.

Show code

import { Button } from '@/design-system/components/Button';

function IconDownload() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path
        d="M10 3v9m0 0l3-3m-3 3L7 9"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path d="M4 14v2h12v-2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function IconArrowRight() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path
        d="M7.5 4.5L13 10l-5.5 5.5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function Example() {
  return (
    <>
      <Button variant="ghost">Ghost</Button>
      <Button variant="ghost" pill>Ghost Pill</Button>
      <Button variant="ghost" loading>Ghost Loading</Button>
      <Button variant="ghost" leadingIcon={<IconDownload />}>Download</Button>
      <Button variant="ghost" trailingIcon={<IconArrowRight />}>Details</Button>
    </>
  );
}

Gradient Buttons

Premium CTA treatment derived from brand tokens. Use sparingly for the most important conversion moments.

Show code

import { Button } from '@/design-system/components/Button';

function IconPlus() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function IconArrowRight() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path
        d="M7.5 4.5L13 10l-5.5 5.5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function Example() {
  return (
    <>
      <Button variant="gradient">Gradient</Button>
      <Button variant="gradient" pill>Gradient Pill</Button>
      <Button variant="gradient" loading>Gradient Loading</Button>
      <Button variant="gradient" className="button--shine">Gradient Shine</Button>
      <Button variant="gradient" leadingIcon={<IconPlus />}>Create</Button>
      <Button variant="gradient" trailingIcon={<IconArrowRight />}>Get Started</Button>
    </>
  );
}

Animation Buttons

Micro-interactions are built into the base button. Optional shine modifier adds a premium sheen on hover.

Show code

import { Button } from '@/design-system/components/Button';

export function Example() {
  return (
    <>
      <Button variant="primary" className="button--shine">Primary Shine</Button>
      <Button variant="secondary" className="button--shine">Secondary Shine</Button>
      <Button variant="success" className="button--shine">Success Shine</Button>
      <Button variant="warning" className="button--shine">Warning Shine</Button>
      <Button variant="danger" className="button--shine">Danger Shine</Button>
      <Button variant="neutral" className="button--shine">Neutral Shine</Button>
      <Button variant="ghost" className="button--shine">Ghost Shine</Button>
      <Button variant="soft" className="button--shine">Soft Shine</Button>
      <Button variant="outline" className="button--shine">Outline Shine</Button>
      <Button variant="danger-ghost" className="button--shine">Danger Ghost Shine</Button>
      <Button variant="gradient" className="button--shine">Gradient Shine</Button>
    </>
  );
}

Buttons With Labels

ALL variants shown with icon + text. Includes leading and trailing examples.

Leading icon + text

Trailing icon + text

Show code

import { Button } from '@/design-system/components/Button';

function IconPlus() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function IconArrowRight() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path
        d="M7.5 4.5L13 10l-5.5 5.5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function Example() {
  return (
    <>
      {/* Leading icon + text (ALL variants) */}
      <Button variant="primary" leadingIcon={<IconPlus />}>Primary</Button>
      <Button variant="secondary" leadingIcon={<IconPlus />}>Secondary</Button>
      <Button variant="success" leadingIcon={<IconPlus />}>Success</Button>
      <Button variant="warning" leadingIcon={<IconPlus />}>Warning</Button>
      <Button variant="danger" leadingIcon={<IconPlus />}>Danger</Button>
      <Button variant="neutral" leadingIcon={<IconPlus />}>Neutral</Button>
      <Button variant="ghost" leadingIcon={<IconPlus />}>Ghost</Button>
      <Button variant="soft" leadingIcon={<IconPlus />}>Soft</Button>
      <Button variant="outline" leadingIcon={<IconPlus />}>Outline</Button>
      <Button variant="danger-ghost" leadingIcon={<IconPlus />}>Danger Ghost</Button>
      <Button variant="link" leadingIcon={<IconPlus />}>Link</Button>
      <Button variant="gradient" leadingIcon={<IconPlus />}>Gradient</Button>

      {/* Trailing icon + text (ALL variants) */}
      <Button variant="primary" trailingIcon={<IconArrowRight />}>Primary</Button>
      <Button variant="secondary" trailingIcon={<IconArrowRight />}>Secondary</Button>
      <Button variant="success" trailingIcon={<IconArrowRight />}>Success</Button>
      <Button variant="warning" trailingIcon={<IconArrowRight />}>Warning</Button>
      <Button variant="danger" trailingIcon={<IconArrowRight />}>Danger</Button>
      <Button variant="neutral" trailingIcon={<IconArrowRight />}>Neutral</Button>
      <Button variant="ghost" trailingIcon={<IconArrowRight />}>Ghost</Button>
      <Button variant="soft" trailingIcon={<IconArrowRight />}>Soft</Button>
      <Button variant="outline" trailingIcon={<IconArrowRight />}>Outline</Button>
      <Button variant="danger-ghost" trailingIcon={<IconArrowRight />}>Danger Ghost</Button>
      <Button variant="link" trailingIcon={<IconArrowRight />}>Link</Button>
      <Button variant="gradient" trailingIcon={<IconArrowRight />}>Gradient</Button>
    </>
  );
}

Buttons With Loaders

Loading state shown across ALL variants (centered spinner with stable layout).

Show code

import { Button } from '@/design-system/components/Button';

export function Example() {
  return (
    <>
      <Button variant="primary" loading>Primary</Button>
      <Button variant="secondary" loading>Secondary</Button>
      <Button variant="success" loading>Success</Button>
      <Button variant="warning" loading>Warning</Button>
      <Button variant="danger" loading>Danger</Button>
      <Button variant="neutral" loading>Neutral</Button>
      <Button variant="ghost" loading>Ghost</Button>
      <Button variant="soft" loading>Soft</Button>
      <Button variant="outline" loading>Outline</Button>
      <Button variant="danger-ghost" loading>Danger Ghost</Button>
      <Button variant="link" loading>Link</Button>
      <Button variant="gradient" loading>Gradient</Button>
    </>
  );
}

Load More Buttons

Full-width pagination CTAs shown across ALL variants (normal + loading).

Show code

import { Button } from '@/design-system/components/Button';

function IconChevronDown() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path
        d="M5 7.5L10 12.5L15 7.5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function Example() {
  return (
    <>
      <Button variant="primary" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="primary" full loading>Load More</Button>

      <Button variant="secondary" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="secondary" full loading>Load More</Button>

      <Button variant="success" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="success" full loading>Load More</Button>

      <Button variant="warning" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="warning" full loading>Load More</Button>

      <Button variant="danger" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="danger" full loading>Load More</Button>

      <Button variant="neutral" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="neutral" full loading>Load More</Button>

      <Button variant="ghost" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="ghost" full loading>Load More</Button>

      <Button variant="soft" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="soft" full loading>Load More</Button>

      <Button variant="outline" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="outline" full loading>Load More</Button>

      <Button variant="danger-ghost" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="danger-ghost" full loading>Load More</Button>

      <Button variant="link" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="link" full loading>Load More</Button>

      <Button variant="gradient" full trailingIcon={<IconChevronDown />}>Load More</Button>
      <Button variant="gradient" full loading>Load More</Button>
    </>
  );
}

Button Sizes

Shows ALL variants at baseline size, plus the full size scale using Primary as reference.

All variants (baseline)

Size scale (Primary reference)

Show code

import { Button } from '@/design-system/components/Button';

export function Example() {
  return (
    <>
      {/* All variants (baseline size) */}
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="success">Success</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="neutral">Neutral</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="soft">Soft</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="danger-ghost">Danger Ghost</Button>
      <Button variant="link">Link</Button>
      <Button variant="gradient">Gradient</Button>

      {/* Size scale (Primary reference) */}
      <Button variant="primary" size="xs">XS</Button>
      <Button variant="primary" size="sm">SM</Button>
      <Button variant="primary" size="md">MD</Button>
      <Button variant="primary" size="lg">LG</Button>
      <Button variant="primary" size="xl">XL</Button>
    </>
  );
}

Button Width

Full-width buttons across ALL variants (useful for forms and mobile surfaces).

Show code

import { Button } from '@/design-system/components/Button';

export function Example() {
  return (
    <>
      <Button variant="primary" full>Primary</Button>
      <Button variant="secondary" full>Secondary</Button>
      <Button variant="success" full>Success</Button>
      <Button variant="warning" full>Warning</Button>
      <Button variant="danger" full>Danger</Button>
      <Button variant="neutral" full>Neutral</Button>
      <Button variant="ghost" full>Ghost</Button>
      <Button variant="soft" full>Soft</Button>
      <Button variant="outline" full>Outline</Button>
      <Button variant="danger-ghost" full>Danger Ghost</Button>
      <Button variant="link" full>Link</Button>
      <Button variant="gradient" full>Gradient</Button>
    </>
  );
}

Buttons Grid

A clean enterprise grid layout showing ALL variants (useful for dashboards/tooling previews).

Show code

import { Button } from '@/design-system/components/Button';

export function Example() {
  return (
    <div style={{
      display: 'grid',
      gap: 'var(--ds-space-3)',
      gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))'
    }}>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="success">Success</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="neutral">Neutral</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="soft">Soft</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="danger-ghost">Danger Ghost</Button>
      <Button variant="link">Link</Button>
      <Button variant="gradient">Gradient</Button>
    </div>
  );
}

Icon Buttons

Icon-only buttons across applicable variants (aria-label required) + a link example with icon + text.

Icon-only (aria-label required)

Link (icon + text)

Show code

import { Button } from '@/design-system/components/Button';

function IconPlus() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function IconArrowRight() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path
        d="M7.5 4.5L13 10l-5.5 5.5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function IconChevronDown() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path
        d="M5 7.5L10 12.5L15 7.5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function IconDownload() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path
        d="M10 3v9m0 0l3-3m-3 3L7 9"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path d="M4 14v2h12v-2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

export function Example() {
  return (
    <>
      {/* Icon-only (aria-label required) */}
      <Button variant="primary" iconOnly aria-label="Add">
        <IconPlus />
      </Button>

      <Button variant="secondary" iconOnly aria-label="Add">
        <IconPlus />
      </Button>

      <Button variant="success" iconOnly aria-label="Add">
        <IconPlus />
      </Button>

      <Button variant="warning" iconOnly aria-label="Add">
        <IconPlus />
      </Button>

      <Button variant="danger" iconOnly aria-label="Remove">
        <IconArrowRight />
      </Button>

      <Button variant="neutral" iconOnly aria-label="More">
        <IconChevronDown />
      </Button>

      <Button variant="ghost" iconOnly aria-label="Download">
        <IconDownload />
      </Button>

      <Button variant="soft" iconOnly aria-label="Add">
        <IconPlus />
      </Button>

      <Button variant="outline" iconOnly aria-label="Next">
        <IconArrowRight />
      </Button>

      <Button variant="danger-ghost" iconOnly aria-label="Remove">
        <IconArrowRight />
      </Button>

      <Button variant="gradient" iconOnly aria-label="Create">
        <IconPlus />
      </Button>

      {/* Link (icon + text) */}
      <Button variant="link" leadingIcon={<IconArrowRight />}>
        Learn more
      </Button>
    </>
  );
}

import { Button } from '@/design-system/components/Button'; export function Example() { return ( <> <Button variant="primary">Primary</Button> <Button variant="secondary">Secondary</Button> <Button variant="success">Success</Button> <Button variant="warning">Warning</Button> <Button variant="danger">Danger</Button> <Button variant="neutral">Neutral</Button> <Button variant="ghost">Ghost</Button> <Button variant="soft">Soft</Button> <Button variant="outline">Outline</Button> <Button variant="danger-ghost">Danger Ghost</Button> <Button variant="link">Link</Button> <Button variant="gradient">Gradient</Button> </> ); }

import { Button } from '@/design-system/components/Button'; export function Example() { return ( <> <Button variant="ghost">Ghost</Button> <Button variant="outline">Outline</Button> <Button variant="danger-ghost">Danger Ghost</Button> <Button variant="neutral">Neutral</Button> <Button variant="link">Link</Button> </> ); }

import { Button } from '@/design-system/components/Button'; export function Example() { return ( <> <Button variant="primary" pill>Primary</Button> <Button variant="secondary" pill>Secondary</Button> <Button variant="success" pill>Success</Button> <Button variant="warning" pill>Warning</Button> <Button variant="danger" pill>Danger</Button> <Button variant="neutral" pill>Neutral</Button> <Button variant="ghost" pill>Ghost</Button> <Button variant="soft" pill>Soft</Button> <Button variant="outline" pill>Outline</Button> <Button variant="danger-ghost" pill>Danger Ghost</Button> <Button variant="link" pill>Link</Button> <Button variant="gradient" pill>Gradient</Button> </> ); }

import { Button } from '@/design-system/components/Button'; function IconDownload() { return ( <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true"> <path d="M10 3v9m0 0l3-3m-3 3L7 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> <path d="M4 14v2h12v-2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /> </svg> ); } function IconArrowRight() { return ( <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true"> <path d="M7.5 4.5L13 10l-5.5 5.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg> ); } export function Example() { return ( <> <Button variant="ghost">Ghost</Button> <Button variant="ghost" pill>Ghost Pill</Button> <Button variant="ghost" loading>Ghost Loading</Button> <Button variant="ghost" leadingIcon={<IconDownload />}>Download</Button> <Button variant="ghost" trailingIcon={<IconArrowRight />}>Details</Button> </> ); }

import { Button } from '@/design-system/components/Button'; export function Example() { return ( <> <Button variant="primary" className="button--shine">Primary Shine</Button> <Button variant="secondary" className="button--shine">Secondary Shine</Button> <Button variant="success" className="button--shine">Success Shine</Button> <Button variant="warning" className="button--shine">Warning Shine</Button> <Button variant="danger" className="button--shine">Danger Shine</Button> <Button variant="neutral" className="button--shine">Neutral Shine</Button> <Button variant="ghost" className="button--shine">Ghost Shine</Button> <Button variant="soft" className="button--shine">Soft Shine</Button> <Button variant="outline" className="button--shine">Outline Shine</Button> <Button variant="danger-ghost" className="button--shine">Danger Ghost Shine</Button> <Button variant="gradient" className="button--shine">Gradient Shine</Button> </> ); }

import { Button } from '@/design-system/components/Button'; function IconPlus() { return ( <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true"> <path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /> </svg> ); } function IconArrowRight() { return ( <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true"> <path d="M7.5 4.5L13 10l-5.5 5.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg> ); } export function Example() { return ( <> {/* Leading icon + text (ALL variants) */} <Button variant="primary" leadingIcon={<IconPlus />}>Primary</Button> <Button variant="secondary" leadingIcon={<IconPlus />}>Secondary</Button> <Button variant="success" leadingIcon={<IconPlus />}>Success</Button> <Button variant="warning" leadingIcon={<IconPlus />}>Warning</Button> <Button variant="danger" leadingIcon={<IconPlus />}>Danger</Button> <Button variant="neutral" leadingIcon={<IconPlus />}>Neutral</Button> <Button variant="ghost" leadingIcon={<IconPlus />}>Ghost</Button> <Button variant="soft" leadingIcon={<IconPlus />}>Soft</Button> <Button variant="outline" leadingIcon={<IconPlus />}>Outline</Button> <Button variant="danger-ghost" leadingIcon={<IconPlus />}>Danger Ghost</Button> <Button variant="link" leadingIcon={<IconPlus />}>Link</Button> <Button variant="gradient" leadingIcon={<IconPlus />}>Gradient</Button> {/* Trailing icon + text (ALL variants) */} <Button variant="primary" trailingIcon={<IconArrowRight />}>Primary</Button> <Button variant="secondary" trailingIcon={<IconArrowRight />}>Secondary</Button> <Button variant="success" trailingIcon={<IconArrowRight />}>Success</Button> <Button variant="warning" trailingIcon={<IconArrowRight />}>Warning</Button> <Button variant="danger" trailingIcon={<IconArrowRight />}>Danger</Button> <Button variant="neutral" trailingIcon={<IconArrowRight />}>Neutral</Button> <Button variant="ghost" trailingIcon={<IconArrowRight />}>Ghost</Button> <Button variant="soft" trailingIcon={<IconArrowRight />}>Soft</Button> <Button variant="outline" trailingIcon={<IconArrowRight />}>Outline</Button> <Button variant="danger-ghost" trailingIcon={<IconArrowRight />}>Danger Ghost</Button> <Button variant="link" trailingIcon={<IconArrowRight />}>Link</Button> <Button variant="gradient" trailingIcon={<IconArrowRight />}>Gradient</Button> </> ); }

import { Button } from '@/design-system/components/Button'; export function Example() { return ( <> <Button variant="primary" loading>Primary</Button> <Button variant="secondary" loading>Secondary</Button> <Button variant="success" loading>Success</Button> <Button variant="warning" loading>Warning</Button> <Button variant="danger" loading>Danger</Button> <Button variant="neutral" loading>Neutral</Button> <Button variant="ghost" loading>Ghost</Button> <Button variant="soft" loading>Soft</Button> <Button variant="outline" loading>Outline</Button> <Button variant="danger-ghost" loading>Danger Ghost</Button> <Button variant="link" loading>Link</Button> <Button variant="gradient" loading>Gradient</Button> </> ); }

import { Button } from '@/design-system/components/Button'; function IconChevronDown() { return ( <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true"> <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg> ); } export function Example() { return ( <> <Button variant="primary" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="primary" full loading>Load More</Button> <Button variant="secondary" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="secondary" full loading>Load More</Button> <Button variant="success" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="success" full loading>Load More</Button> <Button variant="warning" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="warning" full loading>Load More</Button> <Button variant="danger" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="danger" full loading>Load More</Button> <Button variant="neutral" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="neutral" full loading>Load More</Button> <Button variant="ghost" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="ghost" full loading>Load More</Button> <Button variant="soft" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="soft" full loading>Load More</Button> <Button variant="outline" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="outline" full loading>Load More</Button> <Button variant="danger-ghost" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="danger-ghost" full loading>Load More</Button> <Button variant="link" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="link" full loading>Load More</Button> <Button variant="gradient" full trailingIcon={<IconChevronDown />}>Load More</Button> <Button variant="gradient" full loading>Load More</Button> </> ); }

import { Button } from '@/design-system/components/Button'; export function Example() { return ( <> {/* All variants (baseline size) */} <Button variant="primary">Primary</Button> <Button variant="secondary">Secondary</Button> <Button variant="success">Success</Button> <Button variant="warning">Warning</Button> <Button variant="danger">Danger</Button> <Button variant="neutral">Neutral</Button> <Button variant="ghost">Ghost</Button> <Button variant="soft">Soft</Button> <Button variant="outline">Outline</Button> <Button variant="danger-ghost">Danger Ghost</Button> <Button variant="link">Link</Button> <Button variant="gradient">Gradient</Button> {/* Size scale (Primary reference) */} <Button variant="primary" size="xs">XS</Button> <Button variant="primary" size="sm">SM</Button> <Button variant="primary" size="md">MD</Button> <Button variant="primary" size="lg">LG</Button> <Button variant="primary" size="xl">XL</Button> </> ); }

import { Button } from '@/design-system/components/Button'; export function Example() { return ( <> <Button variant="primary" full>Primary</Button> <Button variant="secondary" full>Secondary</Button> <Button variant="success" full>Success</Button> <Button variant="warning" full>Warning</Button> <Button variant="danger" full>Danger</Button> <Button variant="neutral" full>Neutral</Button> <Button variant="ghost" full>Ghost</Button> <Button variant="soft" full>Soft</Button> <Button variant="outline" full>Outline</Button> <Button variant="danger-ghost" full>Danger Ghost</Button> <Button variant="link" full>Link</Button> <Button variant="gradient" full>Gradient</Button> </> ); }

import { Button } from '@/design-system/components/Button'; export function Example() { return ( <div style={{ display: 'grid', gap: 'var(--ds-space-3)', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))' }}> <Button variant="primary">Primary</Button> <Button variant="secondary">Secondary</Button> <Button variant="success">Success</Button> <Button variant="warning">Warning</Button> <Button variant="danger">Danger</Button> <Button variant="neutral">Neutral</Button> <Button variant="ghost">Ghost</Button> <Button variant="soft">Soft</Button> <Button variant="outline">Outline</Button> <Button variant="danger-ghost">Danger Ghost</Button> <Button variant="link">Link</Button> <Button variant="gradient">Gradient</Button> </div> ); }

import { Button } from '@/design-system/components/Button'; function IconPlus() { return ( <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true"> <path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /> </svg> ); } function IconArrowRight() { return ( <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true"> <path d="M7.5 4.5L13 10l-5.5 5.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg> ); } function IconChevronDown() { return ( <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true"> <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg> ); } function IconDownload() { return ( <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true"> <path d="M10 3v9m0 0l3-3m-3 3L7 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> <path d="M4 14v2h12v-2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /> </svg> ); } export function Example() { return ( <> {/* Icon-only (aria-label required) */} <Button variant="primary" iconOnly aria-label="Add"> <IconPlus /> </Button> <Button variant="secondary" iconOnly aria-label="Add"> <IconPlus /> </Button> <Button variant="success" iconOnly aria-label="Add"> <IconPlus /> </Button> <Button variant="warning" iconOnly aria-label="Add"> <IconPlus /> </Button> <Button variant="danger" iconOnly aria-label="Remove"> <IconArrowRight /> </Button> <Button variant="neutral" iconOnly aria-label="More"> <IconChevronDown /> </Button> <Button variant="ghost" iconOnly aria-label="Download"> <IconDownload /> </Button> <Button variant="soft" iconOnly aria-label="Add"> <IconPlus /> </Button> <Button variant="outline" iconOnly aria-label="Next"> <IconArrowRight /> </Button> <Button variant="danger-ghost" iconOnly aria-label="Remove"> <IconArrowRight /> </Button> <Button variant="gradient" iconOnly aria-label="Create"> <IconPlus /> </Button> {/* Link (icon + text) */} <Button variant="link" leadingIcon={<IconArrowRight />}> Learn more </Button> </> ); }