Buttons

<div class="catalog-row">
  <Button
    variant="solid"
    onClick={() => setButtonAction('Solid clicked')}
  >
    Solid
  </Button>
  <SvgButton
    variant="solid"
    label="Add task"
    icon={plusIcon}
    onClick={() => setButtonAction('Add task clicked')}
  />
  <Button
    variant="primary"
    onClick={() => setButtonAction('Primary clicked')}
  >
    Primary <span aria-hidden="true">→</span>
  </Button>
  <Button onClick={() => setButtonAction('Outline clicked')}>
    Outline
  </Button>
  <Button
    variant="ghost"
    onClick={() => setButtonAction('Ghost clicked')}
  >
    Ghost
  </Button>
  <Button
    variant="danger"
    onClick={() => setButtonAction('Delete clicked')}
  >
    Delete
  </Button>
  <Button disabled>Disabled</Button>
  <Button
    variant="link"
    onClick={() => setButtonAction('Link clicked')}
  >
    Link action
  </Button>
  <SvgButton
    variant="link"
    label="Add item"
    visibleLabel="Add item"
    icon={plusIcon}
    onClick={() => setButtonAction('Add item clicked')}
  />
  <Button variant="link" disabled>
    Disabled link
  </Button>

  <Button
    size="compact"
    onClick={() => setButtonAction('Compact clicked')}
  >
    Compact
  </Button>
</div>
<output aria-label="Button action">{buttonAction}</output>

<div class="catalog-row">
  <Button rounded variant="solid">
    Solid pill
  </Button>
  <Button rounded variant="primary">
    Primary pill
  </Button>
  <Button rounded>Outline pill</Button>
  <Button rounded variant="ghost">
    Ghost pill
  </Button>
  <Button rounded variant="danger">
    Danger pill
  </Button>
  <Button rounded size="compact">
    Compact pill
  </Button>
  <Button rounded disabled>
    Disabled pill
  </Button>
  <Button rounded href={componentHref('sliders')}>
    Browse sliders
  </Button>
</div>

<div class="catalog-row">
  <Button
    variant="primary"
    busy={busyButtons}
    onClick={() => setButtonAction('Busy action clicked')}
  >
    Save changes
  </Button>
  <Button
    busy={busyButtons}
    onClick={() => setButtonAction('Busy outline clicked')}
  >
    Upload file
  </Button>
  <IconButton
    label="Sync items"
    icon={icon}
    busy={busyButtons}
    onClick={() => setButtonAction('Busy icon clicked')}
  />
  <ToggleButton
    busy={busyButtons}
    pressed={togglePressed}
    onPressedChange={setTogglePressed}
  >
    Busy toggle
  </ToggleButton>
</div>
<ToggleButton pressed={busyButtons} onPressedChange={setBusyButtons}>
  Busy state
</ToggleButton>

<IconButton
  label="Add item"
  icon={icon}
  onClick={() => setAddedCount((count) => count + 1)}
/>
<output aria-label="Items added">{addedCount} items added</output>

<ButtonGroup label="Grouped actions">
  <Button onClick={() => setGroupAction('First selected')}>
    First
  </Button>
  <Button onClick={() => setGroupAction('Second selected')}>
    Second
  </Button>
</ButtonGroup>
<output aria-label="Grouped action">{groupAction}</output>

<ToggleButton
  pressed={togglePressed}
  onPressedChange={setTogglePressed}
>
  Toggle
</ToggleButton>