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 https://9ui.dev/r/button

Usage

Imports

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

Anatomy

<Button />

Examples

Sizes

button-sizes.tsx

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

With Icon

button-icon.tsx

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

Secondary

button-secondary.tsx

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

Outline

button-outline.tsx

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

Ghost

button-ghost.tsx

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

Link

button-link.tsx

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

Destructive

button-destructive.tsx

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

Loading

button-loading.tsx

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