Button

Displays a button for user interaction.

button-demo.tsx

import { Button } from "@/components/ui/button"
 
export function ButtonDemo() {
	return <Button>Button</Button>
}

Installation

npx shadcn@latest add @9ui/button

Usage

Imports

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

Anatomy

<Button />

Examples

Sizes

button-sizes-demo.tsx

import { Button } from "@/components/ui/button"
 
export function ButtonSizesDemo() {
	return (
		<div className="flex flex-row items-center gap-2">
			<Button size="sm">Small</Button>
			<Button>Default</Button>
			<Button size="lg">Large</Button>
		</div>
	)
}

With Icon

button-icon-demo.tsx

import { PencilIcon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
 
export function ButtonIconDemo() {
	return (
		<Button size="icon" variant="outline">
			<PencilIcon />
		</Button>
	)
}

Secondary

button-secondary-demo.tsx

import { Button } from "@/components/ui/button"
 
export function ButtonSecondaryDemo() {
	return <Button variant="secondary">Secondary</Button>
}

Outline

button-outline-demo.tsx

import { Button } from "@/components/ui/button"
 
export function ButtonOutlineDemo() {
	return <Button variant="outline">Outline</Button>
}

Ghost

button-ghost-demo.tsx

import { Button } from "@/components/ui/button"
 
export function ButtonGhostDemo() {
	return <Button variant="ghost">Ghost</Button>
}

Link

button-link-demo.tsx

import { Button } from "@/components/ui/button"
 
export function ButtonLinkDemo() {
	return <Button variant="link">Link</Button>
}

Destructive

button-destructive-demo.tsx

import { Button } from "@/components/ui/button"
 
export function ButtonDestructiveDemo() {
	return <Button variant="destructive">Destructive</Button>
}

Loading

button-loading-demo.tsx

import { Loader2Icon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
 
export function ButtonLoadingDemo() {
	return (
		<Button className="gap-2" disabled>
			<div className="animate-spin">
				<Loader2Icon />
			</div>
			Loading
		</Button>
	)
}