pnpm add @wandercom/design-system-web

import { Button } from '@wandercom/design-system-web/ui/button';

export function Example() {
  return <Button>Click me</Button>;
}

Compose with other components using asChild:

import { Button } from '@wandercom/design-system-web/ui/button';
import Link from 'next/link';

export function LinkButton() {
  return (
    <Button asChild>
      <Link href="/dashboard">Dashboard</Link>
    </Button>
  );
}

<Button variant="primary">Primary</Button>

<Button variant="secondary">Secondary</Button>

<Button variant="outline">Outline</Button>

<Button variant="ghost">Ghost</Button>

<Button variant="destructive">Destructive</Button>

<Button variant="checkout">Checkout</Button>

<Button variant="link">Link</Button>

Set loading to show an animated spinner and disable the button. For standard buttons the spinner appears inline before the label. For icon-only and asChild buttons, the spinner overlays the content.

<Button loading>Continue</Button>

Four text sizes and four icon-only sizes are available. The default size is md.

Label weight follows size, never variant. Small buttons (xs, sm) usually sit among body text, tabs and table rows, so their labels use the regular weight around them; md and lg labels are medium. A primary button stands out by its fill, so a small primary and a small secondary side by side read as a pair. link and unstyled buttons are always regular.

<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

<Button size="icon-xs">
  <Icon size="sm" />
</Button>
<Button size="icon-sm">
  <Icon size="sm" />
</Button>
<Button size="icon-md">
  <Icon size="md" />
</Button>
<Button size="icon-lg">
  <Icon size="md" />
</Button>

The Button renders a native <button> element by default, inheriting built-in keyboard and screen reader support. When using asChild, ensure the child element is focusable and has the correct role.

Keyboard interaction:

• Space - Activates the button
• Enter - Activates the button

When loading is true the button is automatically disabled, preventing duplicate submissions. The spinner is marked with aria-hidden when not active.

For icon-only buttons, always provide an accessible label via aria-label or visually hidden text so screen readers can announce the button's purpose.