Button

<Button>Button</Button>

Installation

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.

<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>

Sizes

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

<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

With icon

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

<Button>
  <UploadIcon data-icon="inline-start" />
  Upload
</Button>
<Button>
  Continue
  <ArrowRightIcon data-icon="inline-end" />
</Button>

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.

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

API Reference

Button

LinkButton