Toggle

since 1.0

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

Example

Variant

Size

"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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

`<Toggle>`

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

Variants

size

defaultsmlg

variant

defaultoutline

When not to use it

Don't use a toggle for a setting that applies immediately on change — that is a Switch, which reads as on/off rather than pressed/unpressed. Don't use one for form data either; a Checkbox is what submits. Reserve toggles for toolbar-style mode and formatting controls, and use ToggleGroup when several of them belong to one set.

Examples

Icon

Variant

Size

"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

Variant

Size

"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>
  )
}

Toggle Group Tooltip

On This Page

Example Install Props <Toggle>Variants When not to use it Examples Icon With Text

Contribute

Toggle

since 1.0

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

Example

Variant

Size

"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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

`<Toggle>`

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

Variants

size

defaultsmlg

variant

defaultoutline

When not to use it

Examples

Icon

Variant

Size

"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

Variant

Size

"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>
  )
}

Toggle Group Tooltip

On This Page

Example Install Props <Toggle>Variants When not to use it Examples Icon With Text

Contribute