Toggle.

An action with an on and off state.

In practice

Use pressed/onPressedChange for controlled state and aria-label for icon-only controls.

Installation

Install Coal once. Components and TypeScript declarations are included. React 19 and React DOM 19 are peer dependencies.

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

This installs the local package. It is not yet published on npm. See installation for stylesheet setup and integration.

Usage

"use client";
import * as React from "react";
import "@chlohal/coal-ui/styles.css";
import { Bold, Italic } from "lucide-react";
import { Toggle } from "@chlohal/coal-ui";
export default function Example() {
    return (<div>
          <Toggle aria-label="Bold">
            <Bold size={16}/>
          </Toggle>
          <Toggle aria-label="Italic">
            <Italic size={16}/>
          </Toggle>
        </div>);
}

Source

The original Coal implementation. Use the package export to integrate it.

"use client";
import { Action, cn, useValue, type ActionProps } from "./internal.js";
export type ToggleProps = ActionProps & {
  pressed?: boolean;
  defaultPressed?: boolean;
  onPressedChange?: (pressed: boolean) => void;
};
export function Toggle({
  pressed,
  defaultPressed = false,
  onPressedChange,
  onClick,
  className,
  ...props
}: ToggleProps) {
  const [v, set] = useValue(pressed, defaultPressed, onPressedChange);
  return (
    <Action
      aria-pressed={v}
      className={cn("coal-toggle", className)}
      {...props}
      onClick={(e) => {
        onClick?.(e);
        if (!e.defaultPrevented) set(!v);
      }}
    />
  );
}

Accessibility checklist

• Provide an accessible name for controls, including icon-only buttons.
• Check keyboard navigation, visible focus and disabled states in your application.
• Do not rely on color alone to communicate status.