Slot UI
3

Button

PreviousNext

A clickable element for triggering actions and submitting forms, available in multiple variants and sizes.

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

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

Installation

Usage

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

Examples

Secondary

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

export default function ButtonSecondary() {
  return <Button variant="secondary">Secondary</Button>;
}

Outline

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

export default function ButtonOutline() {
  return <Button variant="outline">Outline</Button>;
}

Ghost

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

export default function ButtonGhost() {
  return <Button variant="ghost">Ghost</Button>;
}

Destructive

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

export default function ButtonDestructive() {
  return <Button variant="destructive">Destructive</Button>;
}

Small

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

export default function ButtonSm() {
  return <Button size="sm">Button</Button>;
}

Large

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

export default function ButtonLg() {
  return <Button size="lg">Button</Button>;
}

Disabled

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

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

Icon

Loading...
import { Button } from "@/components/ui/button";
import { PlusIcon } from "lucide-react";

export default function ButtonIcon() {
  return (
    <Button aria-label="Add" size="icon">
      <PlusIcon aria-hidden="true" />
    </Button>
  );
}

Icon Small

Loading...
import { Button } from "@/components/ui/button";
import { PlusIcon } from "lucide-react";

export default function ButtonIconSm() {
  return (
    <Button aria-label="Add" size="icon-sm">
      <PlusIcon aria-hidden="true" />
    </Button>
  );
}

Icon Large

Loading...
import { Button } from "@/components/ui/button";
import { PlusIcon } from "lucide-react";

export default function ButtonIconLg() {
  return (
    <Button aria-label="Add" size="icon-lg">
      <PlusIcon aria-hidden="true" />
    </Button>
  );
}

With Icon

Loading...
import { Button } from "@/components/ui/button";
import { MailIcon } from "lucide-react";

export default function ButtonWithIcon() {
  return (
    <Button size='lg'>
      <MailIcon />
      Login with Email
    </Button>
  );
}

With Link

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

export default function ButtonWithLink() {
  return (
    <Button nativeButton={false} render={<a href="/" />}>Link</Button>
  );
}

Loading

Loading...
import { Button } from "@/components/ui/button";
import { LoaderIcon } from "lucide-react";

export default function ButtonLoading() {
  return (
    <Button disabled>
      <LoaderIcon className="animate-spin" />
      Loading...
    </Button>
  );
}