DocsBlog

  • 1.6.0

  • Day

    Night

    Preview

    Switch mode

  • Cerberus

    Acheron

    Elysium

    Oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridGroupLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMarqueeNotificationsNumber InputPaginationPin InputPopoverProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

On this page

Loading...

Loading...

Loading...

Loading...

Toggle

Toggle allows users to toggle between states via an action.

  • npm
  • source
  • Ark

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

    When not to use

    If you need to conditionally render content based on a binary condition, use the Show component.

    import { ToggleParts } from '@cerberus/react'

    Usage

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

    Primitives

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

    ComponentDescription
    ToggleRootThe context provider for the Toggle parts
    ToggleIndicatorThe indicator shown based on the toggle state

    API

    Parts

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

    Note

    It is best to only use the ToggleParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.

    NameDescription
    RootThe ToggleRoot component which is the Provider for the family.
    IndicatorThe component which displays based on the pressed state.
    ToggleIndicator
    Copy
    notification-toggle.tsx
    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>
    )
    }
    Toggle

    On this page

    • Usage
    • Primitives
    • API
    • Parts
    • Edit this page on Github