Toggle

Toggle allows users to toggle between states via an action.

The Toggle component is a two-state button that allows users to toggle between states via an action.

import { ToggleParts } from '@cerberus/react'

Usage

The Toggle component is unstyled to fit any scenario you may need.

import { NotificationOff, Notification } from '@carbon/icons-react'
import { ToggleParts, IconButton } from '@cerberus/react'

export default function BasicPreview() {
  return (
    <ToggleParts.Root defaultPressed={true} asChild>
      <IconButton ariaLabel="Notification preferences">
        <ToggleParts.Indicator fallback={<NotificationOff />}>
          <Notification />
        </ToggleParts.Indicator>
      </IconButton>
    </ToggleParts.Root>
  )
}

Primitives

You can utilize the primitive components or the css prop to customize the toggle.

Component	Description
ToggleRoot	The context provider for the Toggle parts
ToggleIndicator	The indicator shown based on the toggle state

API

Parts

The ToggleParts API is an Object containing the full family of components.

Name	Description
Root	The `ToggleRoot` component which is the Provider for the family.
Indicator	The `ToggleIndicator` component which displays based on the pressed state.

On this page

Edit this page on Github