---
import ArrowUpIcon from "@lucide/astro/icons/arrow-up"
import { Button } from "@/components/ui/button"
---
<div class="flex flex-wrap items-center gap-2 md:flex-row">
<Button variant="outline">Button</Button>
<Button variant="outline" size="icon" aria-label="Submit">
<ArrowUpIcon />
</Button>
</div>Installation
npx shadcn@latest add @fulldev/buttonUsage
import { Button } from "@/components/ui/button"<Button variant="outline">Button</Button>Button renders a button with type="button", or an a when you pass
href. Pass as to render another element, such as as="label". Use
type="submit" explicitly for form submission. buttonVariants gives the same
classes to a custom element.
Size
Use the size prop to change the size of the button.
---
import ArrowUpRightIcon from "@lucide/astro/icons/arrow-up-right"
import { Button } from "@/components/ui/button"
---
<div class="flex flex-col items-start gap-8 sm:flex-row">
<div class="flex items-start gap-2">
<Button size="xs" variant="outline">
Extra Small
</Button>
<Button size="icon-xs" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
</div>
<div class="flex items-start gap-2">
<Button size="sm" variant="outline">
Small
</Button>
<Button size="icon-sm" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
</div>
<div class="flex items-start gap-2">
<Button variant="outline">Default</Button>
<Button size="icon" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
</div>
<div class="flex items-start gap-2">
<Button variant="outline" size="lg">
Large
</Button>
<Button size="icon-lg" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
</div>
</div>Default
---
import { Button } from "@/components/ui/button"
---
<Button>Button</Button>Outline
---
import { Button } from "@/components/ui/button"
---
<Button variant="outline">Outline</Button>Secondary
---
import { Button } from "@/components/ui/button"
---
<Button variant="secondary">Secondary</Button>Ghost
---
import { Button } from "@/components/ui/button"
---
<Button variant="ghost">Ghost</Button>Destructive
---
import { Button } from "@/components/ui/button"
---
<Button variant="destructive">Destructive</Button>Link
---
import { Button } from "@/components/ui/button"
---
<Button variant="link">Link</Button>Icon
---
import CircleFadingArrowUpIcon from "@lucide/astro/icons/circle-fading-arrow-up"
import { Button } from "@/components/ui/button"
---
<Button variant="outline" size="icon">
<CircleFadingArrowUpIcon />
</Button>With Icon
Add data-icon="inline-start" or data-icon="inline-end" to the icon for the
correct spacing.
---
import GitBranchIcon from "@lucide/astro/icons/git-branch"
import GitForkIcon from "@lucide/astro/icons/git-fork"
import { Button } from "@/components/ui/button"
---
<div class="flex gap-2">
<Button variant="outline">
<GitBranchIcon data-icon="inline-start" /> New Branch
</Button>
<Button variant="outline">
Fork
<GitForkIcon data-icon="inline-end" />
</Button>
</div>Rounded
Use the rounded-full class to make the button rounded.
---
import ArrowUpIcon from "@lucide/astro/icons/arrow-up"
import { Button } from "@/components/ui/button"
---
<div class="flex gap-2">
<Button class="rounded-full">Get Started</Button>
<Button variant="outline" size="icon" class="rounded-full">
<ArrowUpIcon />
</Button>
</div>Spinner
Render a Spinner inside the button to show a loading state, with
data-icon="inline-start" or data-icon="inline-end".
---
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"
---
<div class="flex gap-2">
<Button variant="outline" disabled>
<Spinner data-icon="inline-start" />
Generating
</Button>
<Button variant="secondary" disabled>
Downloading
<Spinner data-icon="inline-start" />
</Button>
</div>Button Group
Use ButtonGroup to group related buttons. See Button Group. The official example on this page uses a dropdown submenu, so it is in the React Button docs only.
As Link
With href, Button renders a real a element, so the link keeps its link
role.
---
import { Button } from "@/components/ui/button"
---
<Button as="a" href="#" variant="secondary" size="sm">
Login
</Button>RTL
---
import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
import PlusIcon from "@lucide/astro/icons/plus"
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"
const translations = {
en: {
dir: "ltr",
values: {
button: "Button",
submit: "Submit",
delete: "Delete",
loading: "Loading",
},
},
ar: {
dir: "rtl",
values: {
button: "زر",
submit: "إرسال",
delete: "حذف",
loading: "جاري التحميل",
},
},
he: {
dir: "rtl",
values: {
button: "כפתור",
submit: "שלח",
delete: "מחק",
loading: "טוען",
},
},
}
const { dir, values: t } = translations.ar
---
<div class="flex flex-wrap items-center gap-2 md:flex-row" dir={dir}>
<Button variant="outline">{t.button}</Button>
<Button variant="destructive">{t.delete}</Button>
<Button variant="outline">
{t.submit} <ArrowRightIcon class="rtl:rotate-180" data-icon="inline-end" />
</Button>
<Button variant="outline" size="icon" aria-label="Add">
<PlusIcon />
</Button>
<Button variant="secondary" disabled>
<Spinner data-icon="inline-start" />
{t.loading}
</Button>
</div>API Reference
Source: src/components/ui/button
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "ghost" | "destructive" | "secondary" | "link" | "default" |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" |
as | HTML tag | "a" with href, else button |
Button writes its variant and size to data-variant and data-size, as
shadcn/ui does, so a parent can style it, such as
has-data-[variant=outline]:gap-2.