Toggle

押した状態を保つボタン。

押すとその状態が残るボタンです。複数を束ねたいときは 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

押された状態。

Typeboolean

onPressedChange?(pressed: boolean) => void

変更時。

Type(pressed: boolean) => void

variant?"default" | "outline"

見た目。

Type"default" | "outline"

Default"default"

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

大きさ。

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

Default"default"

アイコンだけの場合は aria-label を必ず付けてください。