---
import ArrowUpRight from "@lucide/astro/icons/arrow-up-right"
import { Button } from "@/components/ui/button"
---
<Button variant="outline">Button</Button>
<Button variant="outline" size="icon" aria-label="Submit">
<ArrowUpRight />
</Button>Installation
npx shadcn@latest add @fulldev/buttonUsage
import { Button } from "@/components/ui/button"You can also import buttonVariants to reuse button styles on custom elements.
import { buttonVariants } from "@/components/ui/button"<Button>Button</Button>Link
Use the polymorphic as prop with href to render the button as a link element.
---
import { Button } from "@/components/ui/button"
---
<Button as="a" href="/login">Login</Button>Polymorphic
Button is polymorphic via as. Pass as to change the rendered element and
use the relevant attributes for that element.
<Button as="button" type="button">Save</Button>
<Button as="a" href="/docs">Docs</Button>
<Button as="label" for="file-upload">Upload</Button>Data attributes
Button writes its variant and size to data-variant and data-size, as
shadcn/ui’s Radix Button does. Without a variant or size, both are default.
A data-variant or data-size you pass yourself takes precedence. Use them to
style a button from a parent, such as has-data-[variant=outline]:gap-2, or to
select it in CSS and tests.
<button data-slot="button" data-variant="outline" data-size="sm">...</button>Examples
---
import ArrowUpRight from "@lucide/astro/icons/arrow-up-right"
import { Button } from "@/components/ui/button"
---
<Button variant="outline" size="sm">Small</Button>
<Button variant="outline" size="icon-sm">
<ArrowUpRight />
</Button>
<Button variant="outline">Default</Button>
<Button variant="outline" size="icon">
<ArrowUpRight />
</Button>
<Button variant="outline" size="lg">Large</Button>
<Button variant="outline" size="icon-lg">
<ArrowUpRight />
</Button>---
import { Button } from "@/components/ui/button"
---
<Button>Button</Button>---
import { Button } from "@/components/ui/button"
---
<Button variant="outline">Outline</Button>---
import { Button } from "@/components/ui/button"
---
<Button variant="secondary">Secondary</Button>---
import { Button } from "@/components/ui/button"
---
<Button variant="ghost">Ghost</Button>---
import { Button } from "@/components/ui/button"
---
<Button variant="destructive">Destructive</Button>---
import { Button } from "@/components/ui/button"
---
<Button variant="link">Link</Button>---
import CircleFadingArrowUp from "@lucide/astro/icons/circle-fading-arrow-up"
import { Button } from "@/components/ui/button"
---
<Button variant="outline" size="icon" aria-label="Submit">
<CircleFadingArrowUp />
</Button>With Icon
The spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.
---
import GitBranch from "@lucide/astro/icons/git-branch"
import { Button } from "@/components/ui/button"
---
<Button variant="outline" size="sm">
<GitBranch />
New branch
</Button>Rounded
Use the rounded-full class to make the button rounded.
---
import ArrowUp from "@lucide/astro/icons/arrow-up"
import { Button } from "@/components/ui/button"
---
<Button class="rounded-full" size="icon" variant="outline">
<ArrowUp />
</Button>---
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"
---
<Button size="sm" variant="outline" disabled>
<Spinner />
Submit
</Button>API Reference
See the GitHub source code for more information on props.