ToggleButton

Info
Demos
Properties
Events

Demos

Unchecked ToggleButton

<ToggleButton

  label="Label:"

  text="Toggle Me"

/>

Checked ToggleButton

<ToggleButton

  label="Label:"

  text="Checked ToggleButton"

  checked

  on_change={({ checked }) => { console.log('on_change', checked) }}

/>

Default ToggleButton group

ToggleButton Group:
<ToggleButton.Group

  label="ToggleButton Group:"

  value="first"

  on_change={({ value }) => { console.log('on_change', value) }}

>

  <ToggleButton text="First" value="first" />

  <ToggleButton text="Second" value="second" />

  <ToggleButton

    text="Third"

    value="third"

  />

</ToggleButton.Group>

Multi-select ToggleButton group

Multi-select:
<ToggleButton.Group

  label="Multi-select:"

  multiselect="true"

  values={['first', 'third']}

  on_change={({ values }) => { console.log('on_change', values) }}

>

  <ToggleButton text="First" value="first" />

  <ToggleButton text="Second" value="second" />

  <ToggleButton

    text="Third"

    value="third"

  />

</ToggleButton.Group>

Vertical aligned ToggleButton group with checkbox variant and multiselect

Vertical Group:
<ToggleButton.Group

  label="Vertical Group:"

  layout_direction="column"

  multiselect={true}

  variant="checkbox"

  on_change={({ values }) => { console.log('on_change', values) }}

>

  <ToggleButton text="First" value="first" />

  <ToggleButton text="Second" value="second" />

  <ToggleButton

    text="Third"

    value="third"

    checked

  />

</ToggleButton.Group>

ToggleButton group as multiselect with a status message

ToggleButton Group with status:
Error message
<ToggleButton.Group

  label="ToggleButton Group with status:"

  status="Error message"

  multiselect={true}

  on_change={({ values }) => { console.log('on_change', values) }}

>

  <ToggleButton

    text="First"

    value="first"

  />

  <ToggleButton

    text="Second"

    value="second"

    checked



  />

  <ToggleButton

    text="Third"

    value="third"

    checked="true"

  />

</ToggleButton.Group>

ToggleButton with status messages and a group variant as radio

ToggleButtons with status:
Error messageInfo message
<ToggleButton.Group

  label="ToggleButtons with status:"

  variant="radio"

  on_change={({ value }) => { console.log('on_change', 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"

    status_state="info"

  />

</ToggleButton.Group>

Disabled ToggleButton group

Disabled Group:
<ToggleButton.Group

  label="Disabled Group:"

  disabled

  variant="checkbox"

>

  <ToggleButton text="First" value="first" />

  <ToggleButton text="Second" value="second" />

  <ToggleButton

    text="Third"

    value="third"

    checked

  />

</ToggleButton.Group>

ToggleButtons with a suffix

With suffixes:
Error message
<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>

ToggleButtons with icons only

Icons only:
<ToggleButton.Group label="Icons only:">

  <ToggleButton icon="bell" value="first" checked />

  <ToggleButton icon="loupe" value="second" />

  <ToggleButton icon="calendar" value="third" />

</ToggleButton.Group>