---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---
<Button variant="outline">Button</Button>
<Button variant="outline" size="icon" aria-label="Submit">
<Icon name="arrow-up-right" />
</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
Pass href to render the button as a link element. You can also pass
as="a" explicitly when you want to make the rendered element obvious at the
call site.
---
import { Button } from "@/components/ui/button"
---
<Button href="#">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 href="/docs/">Docs</Button>
<Button as="label" for="file-upload">Upload</Button>Examples
---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---
<Button variant="outline" size="sm">Small</Button>
<Button variant="outline" size="icon-sm" aria-label="Open">
<Icon name="arrow-up-right" />
</Button>
<Button variant="outline">Default</Button>
<Button variant="outline" size="icon" aria-label="Open">
<Icon name="arrow-up-right" />
</Button>
<Button variant="outline" size="lg">Large</Button>
<Button variant="outline" size="icon-lg" aria-label="Open">
<Icon name="arrow-up-right" />
</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 { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---
<Button variant="outline" size="icon" aria-label="Submit">
<Icon name="circle-fading-arrow-up" />
</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 { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---
<Button variant="outline" size="sm">
<Icon name="git-branch" />
New branch
</Button>Rounded
Use the rounded-full class to make the button rounded.
---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---
<Button
class="rounded-full"
size="icon"
variant="outline"
aria-label="Scroll up"
>
<Icon name="arrow-up" />
</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.