Skip to Content

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

PropTypeDefaultDescription
variant"default" | "outline""default"Visual style variant
size"default" | "sm" | "lg""default"Size of the toggle
pressedboolean-The controlled pressed state
defaultPressedboolean-The default pressed state
onPressedChange(pressed: boolean) => void-Press state change handler
disabledbooleanfalseWhether 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