Toggle

Two-state button via Radix UI

Default

Usage

import { Toggle } from '@tryvienna/ui'

<Toggle aria-label="Toggle bold">
  <BoldIcon />
</Toggle>

Examples

Default

Default

<Toggle aria-label="Toggle bold">
  <BoldIcon />
</Toggle>

With Text

With Text

<Toggle aria-label="Toggle italic">Italic</Toggle>,

Outline

Outline

<Toggle variant="outline" aria-label="Toggle underline">
  <UnderlineIcon />
</Toggle>

All Sizes

All Sizes

<div className="flex items-center gap-4">
  <Toggle size="sm" aria-label="Small">
    <BoldIcon />
  </Toggle>
  <Toggle size="default" aria-label="Default">
    <BoldIcon />
  </Toggle>
  <Toggle size="lg" aria-label="Large">
    <BoldIcon />
  </Toggle>
</div>

Disabled

Disabled

<Toggle disabled aria-label="Disabled">
  <BoldIcon />
</Toggle>

Variants

Name	Options	Default
variant	default | outline	default
size	default | sm | lg	default

API Reference

Toggle

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

Also accepts all props from TogglePrimitive.Root.

Data Attributes

Component	data-slot
Toggle	"toggle"