ToggleButton

Toggle between different states in your app with either a checkbox or radio mode.

Import#

  • ToggleButton: A button extended with an isChecked state to show on/off.
  • ToggleButtonGroup: Used to group toggle buttons whose actions are related, that also flushes them together.
import { ToggleButton, ToggleButtonGroup } from '@saas-ui/pro'

Usage#

Checkbox group#

<ToggleButtonGroup
  type="checkbox"
  defaultValue={['1', '2']}
  onChange={(e) => console.log(e)}
>
  <ToggleButton value="2">Leads</ToggleButton>
  <ToggleButton value="3">Customers</ToggleButton>
</ToggleButtonGroup>

Radio#

<ToggleButtonGroup
  type="radio"
  defaultValue="1"
  onChange={(e) => console.log(e)}
>
  <ToggleButton value="1">All</ToggleButton>
  <ToggleButton value="2">Leads</ToggleButton>
  <ToggleButton value="3">Customers</ToggleButton>
</ToggleButtonGroup>

Colorscheme#

A colorScheme can be passed to ToggleButtonGroup to modify the theme of all of the child buttons.

<ToggleButtonGroup
  type="checkbox"
  colorScheme="cyan"
  defaultValue={['1', '2']}
  onChange={(e) => console.log(e)}
>
  <ToggleButton value="1">All</ToggleButton>
  <ToggleButton value="2">Leads</ToggleButton>
  <ToggleButton value="3">Customers</ToggleButton>
</ToggleButtonGroup>

Variants#

Supported variants are outline (default) and ghost.

<ToggleButtonGroup
  type="checkbox"
  variant="ghost"
  defaultValue={['1', '2']}
  onChange={(e) => console.log(e)}
>
  <ToggleButton value="1">All</ToggleButton>
  <ToggleButton value="2">Leads</ToggleButton>
  <ToggleButton value="3">Customers</ToggleButton>
</ToggleButtonGroup>

Props#

ToggleButton props#

valuerequired

Type
string

toggleProps

Type
ToggleProps

type

Type
Type

ToggleButtonGroup props#

defaultValue

Type
TValue[] | Value

name

Type
string

onChange

Type
((value: TType extends "checkbox" ? TValue[] : TValue) => void)

ref

Type
ForwardedRef<HTMLDivElement>

type

Type
Type

value

Type
TValue[] | Value

Was this helpful?