Button

6 つの variant と 8 つの size を持つボタン。

いちばんよく使うコンポーネントです。variant で意味づけを、size で大きさを決めます。

export const client = "only";

import { Button } from "@squadbase/vantage/ui";
import { Download } from "lucide-react";

export default function Example() {
  return (
    <div className="flex w-[26rem] flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2">
        <Button>default</Button>
        <Button variant="secondary">secondary</Button>
        <Button variant="outline">outline</Button>
        <Button variant="ghost">ghost</Button>
        <Button variant="destructive">destructive</Button>
        <Button variant="link">link</Button>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Button size="xs">xs</Button>
        <Button size="sm">sm</Button>
        <Button>default</Button>
        <Button size="lg">lg</Button>
        <Button size="icon" variant="outline" aria-label="ダウンロード">
          <Download />
        </Button>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Button disabled>disabled</Button>
        <Button variant="outline">
          <Download />
          アイコン付き
        </Button>
      </div>
    </div>
  );
}

import { Button, buttonVariants } from "@squadbase/vantage/ui";

PropType

見た目と意味づけ。

Default"default"

高さと余白。`icon` 系は正方形になる。

Default"default"

render?ReactElement

別の要素として描画する（Radix の `asChild` に相当）。

TypeReactElement

アイコンは子要素として置くだけでサイズと余白が揃います。アイコンだけのボタンには size="icon" と aria-label を必ず付けてください。

リンクをボタンに見せる

render に要素を渡します。asChild は Base UI にはありません。

import { Link } from "@squadbase/vantage/router";

<Button render={<Link to="/sales" />}>売上を見る</Button>;

クラス文字列だけが欲しいときは buttonVariants({ variant, size }) を使います。

処理中の表示

<Button disabled={isPending}>
  {isPending && <Spinner />}
  保存
</Button>