Button

Drive user action. High-converting variants. Clear states.

default.tsx

1import { Button } from '@/components/ui/button';
2
3export function Default() {
4  return <Button>Click me</Button>;
5}

Installation

pnpm dlx nachui add button

Anatomy

1import { Button } from '@/components/ui/button';

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

Variants

Sizes

sizes.tsx

1import { Plus, Settings } from 'lucide-react';
2import { Button } from '@/components/ui/button';
3
4const basicButtons = [
5  { size: 'sm' as const, label: 'Small' },
6  { size: 'default' as const, label: 'Default' },
7  { size: 'lg' as const, label: 'Large' },
8];
9
10const iconButtons = [
11  { size: 'sm' as const, label: 'Add small', icon: <Plus className="size-4" /> },
12  { size: 'default' as const, label: 'Add default', icon: <Plus className="size-4" /> },
13  { size: 'lg' as const, label: 'Add large', icon: <Plus className="size-5" /> },
14];
15
16export function Sizes() {
17  return (
18    <div className="flex flex-col gap-6">
19      <div className="flex flex-wrap items-center gap-4">
20        {basicButtons.map((btn) => (
21          <Button key={btn.size} size={btn.size}>
22            {btn.label}
23          </Button>
24        ))}
25        <Button size="icon" aria-label="Settings">
26          <Settings className="size-4" />
27        </Button>
28      </div>
29      <div className="flex flex-wrap items-center gap-4">
30        {iconButtons.map((btn) => (
31          <Button key={btn.size} size={btn.size} leftIcon={btn.icon}>
32            {btn.label}
33          </Button>
34        ))}
35      </div>
36    </div>
37  );
38}

Secondary

secondary.tsx

1import { Button } from '@/components/ui/button';
2
3export function Secondary() {
4  return <Button variant="secondary">Secondary</Button>;
5}

Destructive

destructive.tsx

1import { Button } from '@/components/ui/button';
2
3export function Destructive() {
4  return <Button variant="destructive">Destructive</Button>;
5}

Outline

outline.tsx

1import { Button } from '@/components/ui/button';
2
3export function Outline() {
4  return <Button variant="outline">Outline</Button>;
5}

Ghost

ghost.tsx

1import { Button } from '@/components/ui/button';
2
3export function Ghost() {
4  return <Button variant="ghost">Ghost</Button>;
5}

Link

link.tsx

1import { Button } from '@/components/ui/button';
2
3export function Link() {
4  return <Button variant="link">Link</Button>;
5}

API Reference

Button

Prop	Type	Default	Description
`variant`	`"default"` \| `"destructive"` \| `"outline"` \| `"secondary"` \| `"ghost"` \| `"link"`	`"default"`	The button style.
`size`	`"default"` \| `"sm"` \| `"lg"` \| `"icon"`	`"default"`	The button size.
`loading`	`boolean`	`false`	Whether the button is in a loading state.
`loader`	`React.ReactNode`	`<Loader2 />`	Custom loader component to be displayed when loading.
`leftIcon`	`React.ReactNode`	—	Icon to display on the left side of the button.
`rightIcon`	`React.ReactNode`	—	Icon to display on the right side of the button.
`fullWidth`	`boolean`	`false`	Whether the button should take up the full width of its container.
`disabled`	`boolean`	—	Disables the button.
`className`	`string`	—	Additional CSS class names.
`type`	`"button"` \| `"submit"` \| `"reset"`	`"button"`	The type of the button element.
`children`	`React.ReactNode`	—	The button content (text or other elements).

ButtonGroup

Prop	Type	Default	Description
`orientation`	`"horizontal"` \| `"vertical"`	`"horizontal"`	The layout of the button group, either horizontal or vertical.
`attached`	`boolean`	`false`	Whether the buttons in the group are attached to each other (i.e., no border-radius between buttons).
`className`	`string`	—	Additional CSS class names.
`children`	`React.ReactNode`	—	The buttons inside the group.

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousBreadcrumb

NextCallout