🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Toggle

Toggle component for the Simpson Strong-Tie design system, built on Radix UI.

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>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| null`	`'default'`	The size of the toggle button.
`variant`	`"default" \| "outline" \| null`	`'default'`	The visual style variant of the toggle.

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.

Base Class

toggle

Variants

variant (default: default)

Value	Classes
`default`	`-ghost`
`outline`	`-outlined`

size (default: default)

Value	Classes
`default`	`-md`
`sm`	`-sm`
`lg`	`-lg`

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI toggle Documentation

Toggle Group Tooltip

On This Page

Example Installation Props <Toggle>Examples Icon With Text Styling Base Class Variants Accessibility Resources

Contribute