button-demo
"use client"
import { Button, LiquidButton, MetalButton } from "@/components/ui/button"
export function ButtonDemo() {
return (
<div className="flex flex-wrap items-center gap-6 md:flex-row">
<Button>Button</Button>
<LiquidButton>Liquid Button</LiquidButton>
<MetalButton>Metal Button</MetalButton>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-demo.json"Installation
pnpm dlx shadcn@latest add button
Usage
import { Button } from "@/components/ui/button"<Button variant="outline">Button</Button>Link
You can use the asChild prop to make another component look like a button. Here's an example of a link that looks like a button.
import { Link } from "next/link"
import { Button } from "@/components/ui/button"
export function LinkAsButton() {
return (
<Button asChild>
<Link href="/login">Login</Link>
</Button>
)
}Examples
Default
button-default
"use client"
import { Button } from "@/components/ui/button"
export function ButtonDefault() {
return (
<div className="flex flex-wrap items-center gap-2 md:flex-row">
<Button>Button</Button>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-default.json"Liquid Glass
button-liquid-glass
import { LiquidButton } from "@/components/ui/button"
export function ButtonLink() {
return <LiquidButton>Liquid Glass</LiquidButton>
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-liquid-glass.json"Metal
button-metal
"use client"
import { MetalButton } from "@/components/ui/button"
export function ButtonLink() {
return <MetalButton>Metal Button</MetalButton>
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-metal.json"Secondary
button-secondary
import { Button } from "@/components/ui/button"
export function ButtonSecondary() {
return <Button variant="secondary">Secondary</Button>
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-secondary.json"Destructive
button-destructive
import { Button } from "@/components/ui/button"
export function ButtonDestructive() {
return <Button variant="destructive">Destructive</Button>
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-destructive.json"Outline
button-outline
import { Button } from "@/components/ui/button"
export function ButtonOutline() {
return <Button variant="outline">Outline</Button>
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-outline.json"Ghost
button-ghost
import { Button } from "@/components/ui/button"
export function ButtonGhost() {
return <Button variant="ghost">Ghost</Button>
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-ghost.json"Link
button-link
import { Button } from "@/components/ui/button"
export function ButtonLink() {
return <Button variant="link">Link</Button>
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-link.json"Icon
button-icon
import { ChevronRightIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonIcon() {
return (
<Button variant="secondary" size="icon" className="size-8">
<ChevronRightIcon />
</Button>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-icon.json"With Icon
button-with-icon
import { IconGitBranch } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
export function ButtonWithIcon() {
return (
<Button variant="outline" size="sm">
<IconGitBranch /> New Branch
</Button>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-with-icon.json"Loading
button-loading
import { Loader2Icon } from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonLoading() {
return (
<Button size="sm" disabled>
<Loader2Icon className="animate-spin" />
Please wait
</Button>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/button-loading.json"