Toggle

CombricDocumentation version

Pressable tool-state button using aria-pressed.

Import and usage

import { Toggle } from "@combric/react";

Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.

Examples

Default toggle

import { Toggle } from "@combric/react";

export function Example() {
  return <Toggle defaultPressed>Pin project</Toggle>;
}

Unpressed state

import { Toggle } from "@combric/react";

export function Example() {
  return <Toggle>Pin project</Toggle>;
}

Disabled state

import { Toggle } from "@combric/react";

export function Example() {
  return <Toggle defaultPressed disabled>Pin project</Toggle>;
}

Public API

Public exports
Name
`Toggle`

Documented contracts
Property / capability	Published contract
Contract	pressed/defaultPressed
Contract	onPressedChange
Contract	native button props

Accessibility

Uses a native button and exposes pressed state through aria-pressed.

Keyboard

Native Enter and Space activation.

CSS and customization

Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.

Source

View source on GitHub