Button

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

<Button>Button</Button>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/button

Usage

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

As a link

Use LinkButton with href to render a navigation control styled as a button. Internal paths integrate with the client router; external URLs render a plain <a>.

import { LinkButton } from '@dotui/registry/ui/button'
;<LinkButton href="/dashboard">Dashboard</LinkButton>

Examples

Default

With Icons

Loading State

Link Button

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`	`'default'`
	`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`	`"default"`
	`union`	`"md"`
	`ReactNode \| function`	`—`
	`boolean`	`—`

Last updated on 7/7/2026