ToggleButton

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

Beta
Buy Pro
0.40.0 (latest)

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?