Button

Button

Markdown

An action control with intent-based variants, three sizes, optional icons, and loading behavior.

Use Button for actions that change application state. Render it as a link when the interaction navigates to another location.

Variants

Installation

$npx shadcn@latest add @patchui/button

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/button.tsx.

Usage

<Button>Deploy Project</Button>

Button defaults to variant="primary", size="md", and shape="rounded".

Choosing a variant

  • Use primary for the most important action in a view.
  • Use secondary for ordinary filled actions and tertiary for quiet toolbar or adjacent actions.
  • Use outlined when a transparent action needs an explicit boundary.
  • Use soft for a lower-emphasis action that still carries the primary color.
  • Reserve warning and destructive for actions with matching semantic consequences.

Examples

Size and shape

Use the shared size scale for control density. Pill shape is explicit, including for icon-only buttons that should be circular.

Size and shape

Icons and states

Icons reinforce an action label. Loading and disabled states prevent interaction while preserving the control's footprint.

Icons and states

API reference

The wrapper accepts native button attributes. The entries below cover behavior added by Patch UI. See the canonical source for exhaustive TypeScript definitions.

PropTypeDefaultDescription
variant"primary" | "secondary" | "outlined" | "soft" | "tertiary" | "warning" | "destructive""primary"Selects the action hierarchy or semantic treatment.
size"sm" | "md" | "lg""md"Uses the shared 24, 32, or 40 pixel control heights.
shape"rounded" | "pill""rounded"Uses radius-8 or a full pill radius. Icon-only buttons respect the selected shape.
icon / iconPositionReactNode / "left" | "right"- / "left"Adds an icon beside the label. Passing an icon without children creates an icon-only button.
loadingbooleanfalseReplaces the content with a spinner and disables interaction.
renderRenderProp<"button">-Changes the semantic element while retaining Button styling and behavior.

Accessibility

  • Give every icon-only Button an aria-label. Development builds warn when it is missing.
  • Render navigation as an anchor through render={<a href="..." />} rather than attaching navigation behavior to a button.
  • Loading buttons are disabled so repeated activation cannot submit an action twice.
  • Small visual sizes retain a 44 by 44 pixel touch target on coarse pointers.
  • Use action labels that describe the outcome, such as Deploy Project or Delete Member.