Buttons

Use one primary button for the main action in a view, and secondary buttons for the rest.

PrimarySecondaryLink

×

Disabled

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="link">Link</Button>
<Button variant="icon" aria-label="Remove">×</Button>
<Button disabled>Disabled</Button>

size="sm" fits a button into a row of compact controls.

Small

Small

×

<Button size="sm">Small</Button>
<Button size="sm" variant="secondary">Small</Button>
<Button size="sm" variant="icon" aria-label="Remove">×</Button>

Icon buttons have no visible text, so always give them an aria-label. Buttons are type="button" unless you say otherwise.