Accent theme

Base radius

Accent theme

Base radius

Colour scheme
Components

Toggle

A real <button aria-pressed>, the WAI-ARIA pattern for a two-state toggle that looks and behaves like a button (a toolbar "bold" button, say). Distinct from Switch, which is the pattern for an on/off setting.

Usage
import { Toggle } from "@kernelui/react";

<Toggle aria-label="Bold" defaultPressed>
  B
</Toggle>

Props

PropTypeDefault
pressed / defaultPressedbooleanfalse
onPressedChange(pressed: boolean) => void
size"sm" | "md" | "lg""md"