ToggleButton#

<ToggleButton label="Label" text="Toggle Me" />

<ToggleButton
  label="Label"
  text="Checked ToggleButton"
  checked
  onChange={({ checked }) => {
    console.log('onChange', checked)
  }}
/>

<ToggleButton.Group
  label="ToggleButton Group"
  value="first"
  onChange={({ value }) => {
    console.log('onChange', value)
  }}
>
  <ToggleButton text="First" value="first" />
  <ToggleButton text="Second" value="second" />
  <ToggleButton text="Third" value="third" />
</ToggleButton.Group>

<ToggleButton.Group
  label="Multi-select"
  multiselect={true}
  values={['first', 'third']}
  onChange={({ values }) => {
    console.log('onChange', values)
  }}
>
  <ToggleButton text="First" value="first" />
  <ToggleButton text="Second" value="second" />
  <ToggleButton text="Third" value="third" />
</ToggleButton.Group>

<ToggleButton.Group
  label="Vertical Group"
  layoutDirection="column"
  multiselect={true}
  variant="checkbox"
  onChange={({ values }) => {
    console.log('onChange', values)
  }}
>
  <ToggleButton text="First" value="first" />
  <ToggleButton text="Second" value="second" />
  <ToggleButton text="Third" value="third" checked />
</ToggleButton.Group>

<ToggleButton.Group
  label="ToggleButton Group with status"
  status="Error message"
  multiselect={true}
  onChange={({ values }) => {
    console.log('onChange', values)
  }}
>
  <ToggleButton text="First" value="first" />
  <ToggleButton text="Second" value="second" checked />
  <ToggleButton text="Third" value="third" checked={true} />
</ToggleButton.Group>

<ToggleButton.Group
  label="ToggleButtons with status"
  variant="radio"
  onChange={({ value }) => {
    console.log('onChange', value)
  }}
>
  <ToggleButton text="First" value="first" status="error" />
  <ToggleButton
    text="Second"
    value="second"
    checked
    status="Error message"
  />
  <ToggleButton
    text="Third"
    value="third"
    status="Info message"
    statusState="information"
  />
</ToggleButton.Group>

<ToggleButton.Group
  label="Disabled Group"
  disabled
  value="first"
  variant="checkbox"
>
  <ToggleButton text="First" value="first" />
  <ToggleButton text="Second" value="second" />
  <ToggleButton text="Third" value="third" checked />
</ToggleButton.Group>
<ToggleButton.Group
  label="Disabled Radio Group"
  disabled
  value="first"
  variant="radio"
  top
>
  <ToggleButton text="First" value="first" />
  <ToggleButton text="Second" value="second" />
</ToggleButton.Group>
<Section surface="dark" innerSpace top>
  <ToggleButton.Group
    label="Disabled Group on dark"
    disabled
    value="first"
    variant="checkbox"
  >
    <ToggleButton text="First" value="first" />
    <ToggleButton text="Second" value="second" />
  </ToggleButton.Group>
  <ToggleButton.Group
    label="Disabled Radio Group on dark"
    disabled
    value="first"
    variant="radio"
    top
  >
    <ToggleButton text="First" value="first" />
    <ToggleButton text="Second" value="second" />
  </ToggleButton.Group>
</Section>

<ToggleButton.Group
  label="With suffixes"
  suffix={<HelpButton title="Group suffix">Group suffix</HelpButton>}
>
  <ToggleButton text="First" value="first" />
  <ToggleButton
    text="Second"
    value="second"
    status="Error message"
    suffix={<HelpButton title="Button suffix">Button suffix</HelpButton>}
  />
  <ToggleButton text="Third" value="third" checked />
</ToggleButton.Group>

<ToggleButton.Group label="Icons only">
  <ToggleButton icon="bell" title="Notifications" value="first" checked />
  <ToggleButton icon="loupe" title="Search" value="second" />
  <ToggleButton icon="calendar" title="Calendar" value="third" />
</ToggleButton.Group>