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
Last updated on