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/react'

Usage

Checkbox group

import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react'
export default function CheckboxGroup() {
return (
<ToggleButtonGroup
type="checkbox"
defaultValue={['1', '2']}
onChange={(e) => console.log(e)}
>
<ToggleButton value="2">Leads</ToggleButton>
<ToggleButton value="3">Customers</ToggleButton>
</ToggleButtonGroup>
)
}

Radio

import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react'
export default function RadioGroup() {
return (
<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.

import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react'
export default function ColorScheme() {
return (
<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.

import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react'
export default function Variants() {
return (
<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>
)
}

Was this helpful?