Docs
Components
Button

Button

Displays a button or a component that looks like a button.

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/button

Anatomy

import { Button } from "~/components/ui/button";

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

Examples

Sizes

Preview

Code

Custom Variants

Preview

Code

Icon

Preview

Code

Icon-only buttons need accessible labels.

Choose your preferred approach:

// Option 1: aria-label (concise)
<Button size="icon" aria-label="Search">
  <SearchIcon />
</Button>

// Option 2: visually hidden text
<Button size="icon">
  <SearchIcon />
  <span className="sr-only">Search</span>
</Button>

Both work identically. Use aria-label for brevity or sr-only for visibility in your code.

API Reference

Prop	Type	Default
`variant`	`enum`	`"default"`
`size`	`enum`	`"default"`
`isDisabled`	`boolean`
`isPending`	`boolean`
`type`	`enum`	`"button"`

Breadcrumb Calendar

On This Page

Installation
Anatomy
Examples
Sizes
Custom Variants
Icon
API Reference

Contribute

Report an issue
Request a feature
Edit this page