Button
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/button
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components tailwind-variants
Anatomy
import { Button } from "@/components/ui/button"
import { Cog6ToothIcon } from "@heroicons/react"<>
<Button intent="primary">Primary</Button>
<Button intent="secondary">Secondary</Button>
<Button intent="warning">Warning</Button>
<Button intent="danger">Danger</Button>
<Button intent="outline">Outline</Button>
<Button intent="plain">Plain</Button>
<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="sq-xs"><Cog6ToothIcon/></Button>
<Button size="sq-sm"><Cog6ToothIcon/></Button>
<Button size="sq-md"><Cog6ToothIcon/></Button>
<Button size="sq-lg"><Cog6ToothIcon/></Button>
</>Examples
Intent
Use intent to choose the button’s color scheme.
Shape
Use isCircle to make the button circular.
Size
Use size to set the button size.
With icon
You can add icons to buttons, and their color will match the button's color.
Disabled
Set isDisabled to prevent interaction with the button.
Pending
A button can indicate a pending state using the isPending prop. This provides feedback for actions that take time, communicates the status to assistive technologies, and disables interactions except for focus.
With loader
You can add a loader to indicate ongoing processes.
Link
Apply buttonStyles to a link’s className to style it as a button.
Render
You can render a Motion button and drive the animation with component state.
Touch hitbox
For icon-only buttons, use a sq-* size and the touch-target utility to increase the interactive area.
@utility touch-target {
position: relative;
&::before {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
min-height: 44px;
min-width: 44px;
z-index: 9999;
}
}Component API
Button extends the React Aria Components <Button> component.
classNamestringintent"primary" | "secondary" | "warning" | "danger" | "success" | "outline" | "plain"primaryisCircletrue | falsefalsesize"xs" | "sm" | "md" | "lg" | "sq-xs" | "sq-sm" | "sq-md" | "sq-lg"mdSee the React Aria for the full API reference.
