Skip to content
Docs

Toggle

@hua-labs/ui
v1.0.0

bash
npm install @hua-labs/hua
tsx
import { Toggle } from "@hua-labs/hua";

tsx
<Toggle label="Notifications" />
<Toggle label="Favorite" icon={<Star />} />
<Toggle icon={<Heart />} />

: OFF
tsx
const [pressed, setPressed] = useState(false);

<Toggle
  pressed={pressed}
  onPressedChange={setPressed}
  label="Dark Mode"
  icon={pressed ? <Moon /> : <Sun />}
/>

tsx
<Toggle variant="default" label="Default" />
<Toggle variant="outline" label="Outline" />
<Toggle variant="filled" label="Filled" />
<Toggle variant="ghost" label="Ghost" />

tsx
<Toggle size="sm" label="Small" />
<Toggle size="md" label="Medium" />
<Toggle size="lg" label="Large" />

tsx
<Toggle
  label="Receive Notifications"
  description="Get updates via email"
  icon={<Bell />}
/>

variant"default" | "outline" | "filled" | "ghost" | "glass""default"Toggle button style variant
size"sm" | "md" | "lg""md"Toggle button size
pressedboolean-Controlled pressed state
onPressedChange(pressed: boolean) => void-Callback when pressed state changes
labelstring-Toggle label text
descriptionstring-Toggle description text
iconReact.ReactNode-Icon element to display
iconPosition"left" | "right""left"Icon position relative to label

  • •Keyboard Support: Toggle with Space or Enter key
  • •aria-pressed: Pressed state is communicated to assistive technology
  • •Focus Indicator: Clear focus ring for keyboard navigation
ActionLink