Loading...
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "pill" | "minimal" | "ghost" | "minimal" | The visual style of the button |
size | "sm" | "default" | "lg" | "default" | The size of the button |
showLabel | boolean | true | Whether to show the text label next to the icon |
defaultMode | "light" | "dark" | "system" | "system" | The initial theme mode |
onModeChange | (mode: ThemeMode) => void | - | Callback function when theme changes |
className | string | - | Additional CSS classes for styling |
Examples
Pill Variant with Hidden Label
<ThemeCycleButton variant="pill" showLabel={false} />Ghost Variant with Mode Change Callback
<ThemeCycleButton
variant="ghost"
size="lg"
onModeChange={(mode) => console.log("Theme changed to:", mode)}
/>