ToggleButton
Toggle between different states in your app with either a checkbox or radio mode.
- Beta
Buy Pro
- 0.37.0 (latest)
Import
ToggleButton
: A button extended with anisChecked
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 (<ToggleButtonGrouptype="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 (<ToggleButtonGrouptype="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 (<ToggleButtonGrouptype="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 (<ToggleButtonGrouptype="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?