Toggle

ToastTooltip

Two-state buttons, alone or in a group.

Installation

pnpm add krz-ui

Usage

import { Toggle, ToggleGroup } from "krz-ui";
<Toggle aria-label="Bold"><BoldIcon /></Toggle>

<ToggleGroup
  type="single"
  defaultValue="left"
  aria-label="Text alignment"
  items={[
    { value: "left", label: <AlignLeftIcon />, "aria-label": "Align left" },
    { value: "center", label: <AlignCenterIcon />, "aria-label": "Align center" },
  ]}
/>

API Reference

PropTypeDescription
pressed / defaultPressedbooleanToggle: controlled or initial state.
onPressedChange(pressed: boolean) => voidToggle: called when pressed.
type"single" | "multiple"ToggleGroup: one item on at a time, or any number.
value / defaultValue / onValueChangestring | null / string[]ToggleGroup: selection.
itemsToggleGroupItem[]ToggleGroup: value, label, aria-label, disabled.
size / variant"sm" | "md" | "lg" / "default" | "outline"Look and size.
className / style / ref—All go to the outer element. See Customization.
classNames{ item? }Extra classes for inner parts.