Button

The button, with six variants and eight sizes.

The component you’ll reach for most. variant carries the meaning, size the scale.

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

Look and meaning.

Default"default"

Height and padding. The `icon` sizes are square.

Default"default"

render?ReactElement

Render as a different element (Radix's `asChild`).

TypeReactElement

Drop an icon in as a child and its size and spacing are handled. For icon-only buttons always pass size="icon" and an aria-label.

A link that looks like a button

Pass an element to render — Base UI has no asChild.

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

<Button render={<Link to="/sales" />}>View sales</Button>;

When you only want the class string, call buttonVariants({ variant, size }).

Pending state

<Button disabled={isPending}>
  {isPending && <Spinner />}
  Save
</Button>