ToggleButton

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

Beta
Buy Pro
0.35.4 (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?