Skip to content
Docs

@hua-labs/ui
v1.1.0

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

Button
Icon
Switch

Small
Medium
Large

HUA Labs

variant"button" | "icon" | "switch""button"docs:components.themeToggle.props.variant
size"sm" | "md" | "lg""md"docs:components.themeToggle.props.size
showLabelbooleanfalsedocs:components.themeToggle.props.showLabel
label{ light?: string; dark?: string; system?: string }-docs:components.themeToggle.props.label
classNamestring-docs:components.themeToggle.props.className

docs:common.basicUsagetsx
1import { ThemeToggle } from '@hua-labs/hua';
2 
3// Button style (default)
4<ThemeToggle />
5 
6// Icon only
7<ThemeToggle variant="icon" />
8 
9// Switch style
10<ThemeToggle variant="switch" />
docs:components.themeToggle.examples.withLabeltsx
1<ThemeToggle
2  showLabel
3  label={{
4    light: "Light Mode",
5    dark: "Dark Mode",
6    system: "System"
7  }}
8/>
docs:components.themeToggle.examples.sizestsx
1<ThemeToggle variant="icon" size="sm" />
2<ThemeToggle variant="icon" size="md" />
3<ThemeToggle variant="icon" size="lg" />

  • •docs:common.accessibility.focusRing: docs:components.themeToggle.accessibility.focusRingDesc
  • •docs:components.themeToggle.accessibility.clickTarget: docs:components.themeToggle.accessibility.clickTargetDesc
  • •docs:common.animation: docs:components.themeToggle.accessibility.animationDesc
EmptyStateLanguageToggle