Skip to content
fulldev/ui logo fulldev/ui
X

Button

---
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

Section titled “Installation”

To install the button component, run the following command:

Terminal window
npx shadcn@latest add @fulldev/button

Usage

Section titled “Usage”
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>
Section titled “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

Section titled “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>

Examples

Section titled “Examples”

Size

Section titled “Size”
---
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">
  <Icon name="arrow-up-right" />
</Button>
<Button variant="outline">Default</Button>
<Button variant="outline" size="icon">
  <Icon name="arrow-up-right" />
</Button>
<Button variant="outline" size="lg">Large</Button>
<Button variant="outline" size="icon-lg">
  <Icon name="arrow-up-right" />
</Button>

Default

Section titled “Default”
---
import { Button } from "@/components/ui/button"
---


<Button>Button</Button>

Outline

Section titled “Outline”
---
import { Button } from "@/components/ui/button"
---


<Button variant="outline">Outline</Button>

Secondary

Section titled “Secondary”
---
import { Button } from "@/components/ui/button"
---


<Button variant="secondary">Secondary</Button>

Ghost

Section titled “Ghost”
---
import { Button } from "@/components/ui/button"
---


<Button variant="ghost">Ghost</Button>

Destructive

Section titled “Destructive”
---
import { Button } from "@/components/ui/button"
---


<Button variant="destructive">Destructive</Button>
Section titled “Link”
---
import { Button } from "@/components/ui/button"
---


<Button variant="link">Link</Button>

Icon

Section titled “Icon”
---
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

Section titled “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

Section titled “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">
  <Icon name="arrow-up" />
</Button>

Spinner

Section titled “Spinner”
---
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"
---


<Button size="sm" variant="outline" disabled>
  <Spinner />
  Submit
</Button>