• Docs
  • Blog
    • 0.24.0

    • Switch to dark mode
    Get Started
    Components
    Styling
    Theming

    Concepts

    OverviewCompositionTesting

    Layout

    Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrap

    Components

    AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

    Utilities

    Feature FlagsForLocal StoragePortalShowsplitPropsTheme

    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 ToggleIndicator component which displays based on the pressed state.

    On this page

    • Edit this page on Github
    Cerberus Design System | Docs