Toggle

A two-state button that can be toggled on or off, useful for switching between two states.

Usage

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

export default function ToggleDemo() {
  return (
    <Toggle>
      <Bold className="h-4 w-4" />
      Bold
    </Toggle>
  )
}

Examples

Basic Toggle

Simple toggle buttons with icons.

<div className="flex space-x-2">
  <Toggle aria-label="Toggle bold">
    <Bold className="h-4 w-4" />
  </Toggle>
  <Toggle aria-label="Toggle italic">
    <Italic className="h-4 w-4" />
  </Toggle>
  <Toggle aria-label="Toggle underline">
    <Underline className="h-4 w-4" />
  </Toggle>
</div>

With Variants

Different toggle variants and sizes.

<div className="flex space-x-2">
  <Toggle variant="default">Default</Toggle>
  <Toggle variant="outline">Outline</Toggle>
  <Toggle size="sm">Small</Toggle>
  <Toggle size="lg">Large</Toggle>
</div>

Disabled State

Toggle buttons in disabled state.

<div className="flex space-x-2">
  <Toggle disabled>Disabled</Toggle>
  <Toggle variant="outline" disabled>
    Disabled
  </Toggle>
</div>

Props

Prop	Type	Default	Description
variant	"default" | "outline"	"default"	Visual style variant
size	"default" | "sm" | "lg"	"default"	Size of the toggle
pressed	boolean	-	The controlled pressed state
defaultPressed	boolean	-	The default pressed state
onPressedChange	(pressed: boolean) => void	-	Press state change handler
disabled	boolean	false	Whether the toggle is disabled

Design Considerations

• Use clear visual states
• Provide visual feedback
• Consider mobile touch targets
• Use appropriate sizing
• Maintain consistent styling

Accessibility

• Supports keyboard navigation
• Maintains focus states
• Provides ARIA labels
• Announces state changes
• Handles disabled states