Skip to content
fulldev/ui logo fulldev/ui
X 468

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"
<Button>Button</Button>
Section titled “Link”

You can use the href attribute to render the button as a link element.

---
import { Button } from "@/components/ui/button"
---


<Button href="/login">Login</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>