tarve
Docs GitHub

Toggle

A two-state button, like bold in a text toolbar.

ToggleProps packages/core/src/form-controls.ts:280 ↗

Import

import { Toggle } from "@tarve/core";

Usage

Toggle.tsx
import { Toggle } from "@tarve/core";

let bold = false;

<Toggle
  label="Bold"
  variant="outline"
  pressed={bold}
  onPressedChange={(pressed) => {
    bold = pressed;
  }}
/>

Props

PropTypeDefault
pressed required boolean—
disabled boolean—
label string—
onPressedChange (pressed: boolean) => void—
size ButtonProps["size"]"default"
variant "default" | "outline""default"

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

ButtonProps
interface ButtonProps extends BaseProps {
  variant?: ButtonVariant;
  size?: "sm" | "default" | "lg";
  disabled?: boolean;
  control?: Control;
  onClick?: () => void;
  onHover?: (hovered: boolean) => void;
}