Toggle

@/components/kamod-ui/toggle

Installation

Import Toggle from `@/components/kamod-ui/toggle`.

pnpm add @kamod-ch/ui

Usage

Use `variant`, `size`, and controlled state props to match toolbar and settings use-cases.

import { Toggle } from "@/components/kamod-ui/toggle";
<Toggle />

Basic Toggle

A compact default toggle with an initial pressed state.

Toolbar Actions

Render grouped actions in a compact, modern formatting toolbar.

Variants and Sizes

Use `outline` for elevated surfaces and `icon` size for compact controls.

API Reference

Props, slots and variants for this component.

Toggle

Toggle component props and accepted values.

PropTypeDefault
defaultPressedbooleanfalse
pressedbooleanuncontrolled
onPressedChange(next: boolean) => voidundefined
variant"default" | "outline""default"
size"sm" | "default" | "lg" | "icon""default"

Accessibility Notes

Ensure pressed state is visually distinct and use concise labels for screen reader clarity.