Toggle

Toggle is a two-state button component that can be pressed and unpressed.

Toggles provide a button-like control that maintains a pressed or unpressed state, making them ideal for toolbar controls, formatting options, or any interface element that represents a binary state that persists across interactions. Unlike switches which typically represent settings that take immediate effect, toggles are often used for mode selection or formatting choices where multiple toggles can be active simultaneously. They provide clear visual feedback about their current state through styling changes.

Use toggles in toolbars, text editors, or control panels where users need to select options that can be independently turned on or off. They work particularly well when grouped together for related controls like text formatting (bold, italic, underline). Toggles should have clear icons or labels that indicate what feature they control, and their pressed state should be visually distinct from their unpressed state.

Example

"use client"

import { Toggle } from "@strongtie/design-system/toggle"
import { MdFormatBold } from "react-icons/md"

export function ToggleDefault() {
  return (
    <Toggle aria-label="Toggle bold">
      <MdFormatBold />
    </Toggle>
  )
}

Installation


npm install @strongtie/design-system

import { Toggle } from "@strongtie/design-system/toggle"

Props

`<Toggle>`

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| null`	-
`variant`	`"default" \| "outline" \| null`	-

Examples

"use client"

import { Toggle } from "@strongtie/design-system/toggle"
import { MdFormatBold } from "react-icons/md"

export function ToggleDefault() {
  return (
    <Toggle aria-label="Toggle bold">
      <MdFormatBold />
    </Toggle>
  )
}

Icon

"use client"

import { Toggle } from "@strongtie/design-system/toggle"
import {
  MdFormatBold,
  MdFormatItalic,
  MdFormatUnderlined,
} from "react-icons/md"

export function ToggleIcon() {
  return (
    <div className="flex items-center gap-2">
      <Toggle aria-label="Toggle bold">
        <MdFormatBold className="h-4 w-4" />
      </Toggle>
      <Toggle aria-label="Toggle italic">
        <MdFormatItalic className="h-4 w-4" />
      </Toggle>
      <Toggle aria-label="Toggle underline">
        <MdFormatUnderlined className="h-4 w-4" />
      </Toggle>
    </div>
  )
}

With Text

"use client"

import { Toggle } from "@strongtie/design-system/toggle"
import { MdFormatBold } from "react-icons/md"

export function ToggleWithText() {
  return (
    <Toggle aria-label="Toggle bold">
      <MdFormatBold className="mr-2 h-4 w-4" />
      Bold
    </Toggle>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

toggle

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Toggle Group Tooltip

On This Page

Example Installation Props <Toggle>Examples Icon With Text Styling Classes Accessibility

Contribute