Buttons

Mode Toggle

Animated sun ⇄ moon light/dark toggle icon-button.

Import

tsx

import { ModeToggle } from "@cooud-ui/ui";

bash

npx cooud-ui add mode-toggle

Examples

Sun ⇄ moon morph

Fully controlled: the button reports the opposite mode via `onModeChange` while the sun scales into a crescent moon with pure CSS transitions (instant under reduced motion).

Current mode: light

tsx

const [mode, setMode] = useState<"light" | "dark">("light");

return <ModeToggle mode={mode} onModeChange={setMode} />;

Sizes

Two square footprints — `sm` for dense toolbars, `md` for headers.

tsx

const [mode, setMode] = useState<"light" | "dark">("dark");

return (
  <div className="flex items-center gap-3">
    <ModeToggle size="sm" mode={mode} onModeChange={setMode} />
    <ModeToggle size="md" mode={mode} onModeChange={setMode} />
  </div>
);

Wired to a theme provider

The component never touches the DOM root — hand it your provider's mode. This one is live: it drives the whole docs site through `useTheme` from `@cooud-ui/theme`.

tsx

const { mode, setMode } = useTheme();

return <ModeToggle mode={mode} onModeChange={setMode} />;

API Reference

Generated from the component's exported types.

ModeToggleProps

Extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">

Prop	Type	Default	Description
`mode`*	`ModeToggleMode`	—	The current color mode. The component is fully controlled — it never stores mode itself.
`onModeChange`*	`(next: ModeToggleMode) => void`	—	Called with the opposite mode when the button is activated (click, Enter or Space).
`size`	`ModeToggleSize`	`"md"`	Button footprint: `sm` (32px, 16px glyph) or `md` (36px, 20px glyph). Defaults to `md`.