Button

Displays a button built on the Base UI Button primitive, with default, secondary, outline, ghost, destructive, and link variants.

TSX
import { Button } from "@/components/ui/button";

export default function ButtonDemo() {
  return <Button>Button</Button>;
}

Installation

Bash
npx shadcn@latest add @sevenui/buttonpnpm dlx shadcn@latest add @sevenui/buttonyarn dlx shadcn@latest add @sevenui/buttonbunx --bun shadcn@latest add @sevenui/button

Usage

TSX
import { Button } from "@/components/ui/button";

<Button variant="outline">Button</Button>;

Examples

Variants

TSX
import { Button } from "@/components/ui/button";

export default function ButtonVariants() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="default">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>
  );
}

Sizes

Text sizes pair with icon-* counterparts for icon-only buttons — give those an aria-label.

TSX
"use client";

import { PlusIcon } from "lucide-react";

import { Button } from "@/components/ui/button";

export default function ButtonSizes() {
  return (
    <div className="flex flex-col items-start gap-4">
      <div className="flex flex-wrap items-center gap-2">
        <Button variant="outline" size="xs">
          Extra small
        </Button>
        <Button variant="outline" size="sm">
          Small
        </Button>
        <Button variant="outline">Default</Button>
        <Button variant="outline" size="lg">
          Large
        </Button>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Button variant="outline" size="icon-xs" aria-label="Add (extra small)">
          <PlusIcon />
        </Button>
        <Button variant="outline" size="icon-sm" aria-label="Add (small)">
          <PlusIcon />
        </Button>
        <Button variant="outline" size="icon" aria-label="Add">
          <PlusIcon />
        </Button>
        <Button variant="outline" size="icon-lg" aria-label="Add (large)">
          <PlusIcon />
        </Button>
      </div>
    </div>
  );
}

Disabled

TSX
"use client";

import { Button } from "@/components/ui/button";

export default function ButtonDisabled() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button disabled>Default</Button>
      <Button variant="secondary" disabled>
        Secondary
      </Button>
      <Button variant="outline" disabled>
        Outline
      </Button>
      <Button variant="destructive" disabled>
        Destructive
      </Button>
    </div>
  );
}

Loading

Pair disabled with the Spinner component while an action is in flight.

TSX
"use client";

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

export default function ButtonLoading() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button disabled>
        <Spinner />
        Please wait
      </Button>
      <Button variant="outline" disabled>
        <Spinner />
        Saving draft
      </Button>
    </div>
  );
}

API reference

Button

Extends the Base UI Button primitive — all its props (including render and disabled) apply.

Prop	Type	Default
`variant`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"`	`"default"`
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`

buttonVariants is also exported for styling custom elements.