Button
Displays a button or a component that looks like a button.
Demo
The variant says how much the action asks to be pressed. default is the one action a view is for, secondary and outline are the ones beside it, ghost is for actions in a toolbar or a row that should not draw the eye, and destructive is for one that cannot be undone.
Usage
Import the parts you need from the component's folder.
import { Button } from "@/components/ui/button";Size
Use the size prop to change the size of the button.
Default
Secondary
Outline
Ghost
Destructive
Outline Destructive
An outline button that reads as destructive. Use it when the action is dangerous but not the primary one on screen.
Link
Icon
With Icon
Remember to add the data-icon inline-start or inline-end attribute to the icon for the correct spacing.
Pill
shape="pill" rounds the ends fully at any size, icon-only buttons included.
Spinner
Render a Spinner component inside the button to show a loading state.
Button Group
Wrap buttons in ButtonGroup to join them into a single control.
As Link
Apply buttonVariants to any element (like an anchor) to make it look like a button.
API Reference
Button
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "outline-destructive" | "destructive" | "ghost" | "link" | "default" | Visual style. |
size | "xs" | "sm" | "default" | "lg" | "xl" | "icon" | "iconXs" | "iconSm" | "iconLg" | "default" | Height and padding: sm 32px, default 36px (the height of an Input or a Select, so they line up in one row), lg 44px. xl is one step above lg, for hero and landing CTAs; it has no icon-only counterpart. Icon sizes are square and also accept the kebab aliases icon-xs, icon-sm, and icon-lg. |
shape | "default" | "pill" | "default" | pill rounds the ends fully, whatever the size. Use it instead of a rounded-full class. |
loading | boolean | false | Shows a spinner over the label and disables the button. The label stays in place, hidden, so the width does not change. |
to | string | — | Renders as NuxtLink when set. External URLs (http) open in a new tab. |
as | string | "button" | HTML element to render when to is empty. |
asChild | boolean | false | Render the child slot without a wrapper element. |
class | string | — | Extra classes, merged with cn(). |
| Slot | Description |
|---|---|
default | Button label and icons. |