Button

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

<Button>Button</Button>

Installation

npm

pnpm

yarn

bun

pnpm dlx shadcn@latest add @dotui/button

Usage

A button triggers an action. Its label names the action; add an icon for extra context.

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

<Button>Button</Button>

Variants

Use the variant prop to set the visual style of the button.

<div className="flex flex-wrap items-center justify-center gap-2">
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="quiet">Quiet</Button>
  <Button variant="link">Link</Button>
  <Button variant="warning">Warning</Button>
  <Button variant="danger">Danger</Button>
</div>

Sizes

Use the size prop to set the size of the button.

<div className="flex flex-wrap items-center justify-center gap-2">
  <Button size="xs">Extra small</Button>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</div>

With icon

Add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

<div className="flex items-center gap-2">
  <Button>
    <UploadIcon data-icon="inline-start" />
    Upload
  </Button>
  <Button>
    Continue
    <ArrowRightIcon data-icon="inline-end" />
  </Button>
</div>

Icon buttons

Use the isIconOnly prop for icon-only buttons.
Provide an aria-label to give the button an accessible name.

<Button isIconOnly aria-label="Add item">
  <PlusIcon />
</Button>

Pending

Use the isPending prop to show a loading indicator while an action completes.

<Button isPending>Upload</Button>

Link buttons

The Button component always represents a button semantically. To create a link that visually looks like a button, use the LinkButton component instead.

Documentation

<LinkButton href="/docs">Documentation</LinkButton>

API Reference

Button

A clickable element that triggers an action. Buttons communicate actions users can take and allow users to interact with the page.

Prop	Type	Default
	`union`	`'secondary'`
	`union`	`"md"`
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`boolean`	`—`

LinkButton

A link styled as a button. Link buttons navigate to another page or resource when pressed, rather than performing an action.

Prop	Type	Default
	`union`	`"secondary"`
	`union`	`"md"`
	`ReactNode \| function`	`—`
	`boolean`	`—`

Last updated on 9/14/2026