Button

Displays an interactive control for actions.

@rivetui/button

Preview

Explore each composition interactively, then open its code in the same context.

Choose a visual weight that matches the importance and risk of the action.

Use explicit text and icon sizes to keep control density predictable.

Pair the disabled state with a label that explains whether an action is blocked or still processing.

Registry

Add the component source and its declared dependencies with the shadcn CLI.

Install component

$bunx --bun shadcn@latest add @rivetui/button

Public interface

Component-specific props are listed here. Native element and Base UI props continue to pass through.

Prop	Type	Default
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "destructive"`	`"primary"`
`size`	`"sm" \| "md" \| "lg" \| "icon-sm" \| "icon-md" \| "icon-lg"`	`"md"`
`disabled`	`boolean`	`false`
`nativeButton`	`boolean`	`true`
`render`	`ReactElement \| function`	`—`