<Button>Button</Button>npx shadcn@latest add @dotui/buttonButton allow users to initiate an action or command with mouse, touch or keyboard interaction.
The button's label indicates the purpose of the action to the user. You may also include an icon for additional context.
import { Button } from "@dotui/registry/ui/button";<Button>Button</Button>Use the controls below to experiment with different button props and see the live preview and code update.
The visual style of the button (Vanilla CSS implementation specific).
"danger" | "default" | "link" | "primary" | "quiet" | "warning"The size of the button. Use `icon-xs`, `icon-sm`, `icon`, or `icon-lg` for icon-only buttons.
"icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "md" | "sm" | "xs"<Button>Button</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 | 'default' | ||
union | "md" | ||
ReactNode | function | — | ||
boolean | — | ||
boolean | — | ||
DOMRenderFunction<"button", ButtonRenderProps> | — | ||
| Prop | Type | Default | |
|---|---|---|---|
union | "default" | ||
union | "md" | ||
ReactNode | function | — | ||
boolean | — | ||
union | — | ||
Last updated on 5/22/2026