Skip to main content

Button

Displays a button or a component that looks like a button.

Installation​

bunx shadcn@latest add button -r uplift

Or with NPM package:

import { Button } from "@upliftui/ui";

Usage​

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

export default function Example() {
  return <Button>Click me</Button>;
}

Variants​

Default​

<Button variant="default">Default</Button>

Secondary​

<Button variant="secondary">Secondary</Button>

Destructive​

<Button variant="destructive">Destructive</Button>

Outline​

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

Ghost​

<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Sizes​

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <IconPlus />
</Button>

With Icons​

import { MailIcon } from "lucide-react";

<Button>
  <MailIcon /> Login with Email
</Button>;

Loading State​

<Button disabled>
  <Loader2 className="animate-spin" />
  Please wait
</Button>

As Child​

Use the asChild prop to render as a different element:

import Link from "next/link";

<Button asChild>
  <Link href="/dashboard">Dashboard</Link>
</Button>;

API Reference​

Props​

PropTypeDefaultDescription
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""default"The visual style variant
size"default" | "sm" | "lg" | "icon""default"The size of the button
asChildbooleanfalseRender as the child element