Toggle

A two-state button that can be either on or off. Built on top of Radix UI Toggle primitive.

Installation

npm install @darksnow-ui/toggle

Peer Dependencies

npm install react react-dom

Usage

import { Toggle } from "@darksnow-ui/toggle"
import { Bold } from "lucide-react"

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

Props

| Prop | Type | Default | Description | |--------------|-----------------------------------|-----------|--------------------------------| | pressed | boolean | - | Controlled pressed state | | defaultPressed| boolean | false | Default pressed state | | onPressedChange| function | - | Called when pressed changes | | disabled | boolean | false | Disables the toggle | | variant | "default" | "outline" | "default" | Toggle variant | | size | "default" | "sm" | "lg" | "default" | Toggle size | | className | string | - | Additional CSS classes |

Examples

Basic Toggle

<Toggle>
  <Bold className="h-4 w-4" />
</Toggle>

Controlled Toggle

function ControlledToggle() {
  const [pressed, setPressed] = useState(false)

  return (
    <Toggle pressed={pressed} onPressedChange={setPressed}>
      <Bold className="h-4 w-4" />
    </Toggle>
  )
}

Toggle Variants

<div className="flex space-x-2">
  <Toggle variant="default">
    <Bold className="h-4 w-4" />
  </Toggle>
  <Toggle variant="outline">
    <Italic className="h-4 w-4" />
  </Toggle>
</div>

Toggle Sizes

<div className="flex items-center space-x-2">
  <Toggle size="sm">
    <Bold className="h-3 w-3" />
  </Toggle>
  <Toggle size="default">
    <Bold className="h-4 w-4" />
  </Toggle>
  <Toggle size="lg">
    <Bold className="h-5 w-5" />
  </Toggle>
</div>

Text Formatting Toolbar

function FormattingToolbar() {
  const [bold, setBold] = useState(false)
  const [italic, setItalic] = useState(false)
  const [underline, setUnderline] = useState(false)

  return (
    <div className="flex space-x-1">
      <Toggle pressed={bold} onPressedChange={setBold}>
        <Bold className="h-4 w-4" />
      </Toggle>
      <Toggle pressed={italic} onPressedChange={setItalic}>
        <Italic className="h-4 w-4" />
      </Toggle>
      <Toggle pressed={underline} onPressedChange={setUnderline}>
        <Underline className="h-4 w-4" />
      </Toggle>
    </div>
  )
}

Disabled Toggle

<Toggle disabled>
  <Bold className="h-4 w-4" />
</Toggle>

Accessibility

• Full keyboard support (Space and Enter keys)
• Screen reader accessible with proper ARIA attributes
• Focus management and focus indicators
• Pressed state announcements

Styling

The Toggle component uses DarkSnow UI design tokens:

• Default: Standard button styling with pressed state
• Outline: Outlined button with pressed state
• Pressed: Visual indication of active state
• Disabled: Reduced opacity and disabled cursor

Best Practices

1. Clear visual feedback: Ensure pressed state is visually distinct
2. Consistent icons: Use appropriate icons that convey the toggle action
3. Accessible labels: Provide meaningful aria-label attributes
4. Logical grouping: Group related toggles together
5. State persistence: Consider persisting toggle states when appropriate

Related Components

• Switch - On/off controls for settings
• Checkbox - Binary choices in forms
• Toggle Group - Grouped toggle controls
• Button - General purpose buttons