Button

Trigger an action with clear emphasis.

Preview

Installation

Install the local ghost-kit source bundle while the registry runs at localhost:3110. It contains this component and its source dependencies. Prepare the local registry first so token dependencies also resolve locally.

Install

npx shadcn@latest add http://localhost:3110/r/ghost-kit.json

Basic usage

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

<Button>Save changes</Button>

Structure

Examples

Solid

The highest-emphasis action. Use it for the main next step in a group.

Subtle

The default control. Mist surface with no outline.

Ghost

Transparent at rest. Use it for low-emphasis actions inside an existing surface.

Outline

Transparent with a border. For secondary surfaces.

Destructive

Marks destruction. Never for safe actions.

Icons

Use leadingIcon or trailingIcon with a label. Use IconButton for icon-only controls. Always give icon-only buttons an accessible name.

Loading and disabled

Busy work shows a spinner, marks aria-busy, and stays inert but focusable. Disabled work remains visible but cannot be activated.

Sizes

Text and icon buttons share one height scale: xs 24px, sm 28px, base 32px, and lg 40px. The default is base. touch stays 44px. Coarse-pointer controls expand to at least 44px.

Extra small: 24px

Use for secondary actions in dense rows.

Small: 28px

Use in compact toolbars and forms.

Base: 32px

Use for ordinary actions. This is the default.

Large: 40px

Use for prominent actions that need more space.

Touch: 44px

Use when an action needs a dedicated touch target.

API reference

For inherited behavior and additional part properties, see the Base UI Button API.

Button properties
Prop	Type	Default	Description
`className`	`string`	`"ui-button-spinner"`	Sets class name.
`style`	`React.CSSProperties \| ((state: ButtonState) => React.CSSProperties)`		Style applied to the element, or a function that returns a style object based on the component's state.
`children`	`React.ReactNode`		Sets children.
`focusableWhenDisabled`	`boolean`	`false`	Whether the button should be focusable when disabled.
`nativeButton`	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`render`	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ButtonState>`		Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`variant`	`"ghost" \| "subtle" \| "solid" \| "outline" \| "destructive" \| null`	`"subtle"`	Sets variant.
`size`	`"base" \| "xs" \| "sm" \| "lg" \| "touch"`	`"base"`	Control height: xs 24px, sm 28px, base 32px, lg 40px, touch 44px. Coarse-pointer targets expand to at least 44px.
`shape`	`"base" \| "circle" \| "square" \| null`	`"base"`	Sets shape.
`loading`	`boolean`	`false`	Sets loading.
`asChild`	`boolean`	`false`	Sets as child.
`leadingIcon`	`React.ReactNode`		Sets leading icon.
`trailingIcon`	`React.ReactNode`		Sets trailing icon.