Button

Usage

Import the component and render it.

import { Button } from 'src/components/Button/Button';
import { LifebuoyIcon } from '@phosphor-icons/react';

<Button
  variant="brand"
  size="md"
  iconStart={<LifebuoyIcon />}
  iconEnd={<LifebuoyIcon />}
>Button</Button>

Accessibility

Role: button (native <button> element).

• Use a native <button>; not <div role="button">.
• The Focus state must be shown only with :focus-visible so it does not appear on mouse clicks.
• Icon-only (Figma "Has Label" off): hideLabel. The label is still required and becomes aria-label, so an icon-only button can never be unnamed; the icon itself is hidden from assistive technology.
• Disabled: use the disabled attribute; the reduced contrast is intentional (WCAG exempts disabled controls).
• With href it is a link (role link): Enter opens it (Space does not), and it can be opened in a new tab.

Size

Set the size prop: Small is "sm", Medium is "md".

<Button size="sm">Button</Button>
<Button size="md">Button</Button>

Variant

Set the variant prop: Brand is "brand", Ghost is "ghost", Subtle is "subtle", Outline is "outline", Danger is "danger".

<Button variant="brand">Button</Button>
<Button variant="ghost">Button</Button>
<Button variant="subtle">Button</Button>
<Button variant="outline">Button</Button>
<Button variant="danger">Button</Button>

States

Disabled comes from the disabled prop. Hover, Focus and Pressed follow the pointer and the keyboard: try them in the playground.

<Button disabled>Button</Button>

Used in

Button is part of ButtonGroup, Calendar, Card, Dialog, Drawer, EmptyState, Footer, Form, ListItem, NavigationBar and Toaster.

Actions

Pass callbacks to respond to the component.

import { Button } from 'src/components/Button/Button';
import { LifebuoyIcon } from '@phosphor-icons/react';

<Button
  variant="brand"
  size="md"
  iconStart={<LifebuoyIcon />}
  iconEnd={<LifebuoyIcon />}
  onClick={(event) => console.log(event)}
>Button</Button>