Toggle

A button that stays pressed.

A button that keeps its pressed state. To group several, use ToggleGroup.

export const client = "only";

import { useState } from "react";
import { Toggle } from "@squadbase/vantage/ui";
import { Star } from "lucide-react";

export default function Example() {
  const [pinned, setPinned] = useState(true);
  return (
    <div className="flex items-center gap-2">
      <Toggle pressed={pinned} onPressedChange={setPinned} aria-label="ピン留め">
        <Star />
      </Toggle>
      <Toggle variant="outline">小数を表示</Toggle>
      <Toggle size="sm">sm</Toggle>
      <Toggle size="lg">lg</Toggle>
    </div>
  );
}

import { Toggle, toggleVariants } from "@squadbase/vantage/ui";

PropType

pressed?boolean

The pressed state.

Typeboolean

onPressedChange?(pressed: boolean) => void

Fired on change.

Type(pressed: boolean) => void

variant?"default" | "outline"

Look.

Type"default" | "outline"

Default"default"

size?"default" | "sm" | "lg"

Scale.

Type"default" | "sm" | "lg"

Default"default"

Icon-only toggles need an aria-label.