Button

Actions, icon actions, and pending actions.

Primitive

Example

A representative composition rendered with the published package API.

The decisions most consumers need to make when adopting this family.

variant

default · secondary · outline · ghost · link · destructive

Use one primary action per local decision area.

size

sm · default · lg · icon

Match the surrounding density; use IconButton for icon-only actions.

disabled

readable primary

A disabled primary button keeps a tinted action surface with readable text; a pending LoadingButton keeps its filled style.

Option	Values or anatomy	Guidance
`variant`	default · secondary · outline · ghost · link · destructive	Use one primary action per local decision area.
`size`	sm · default · lg · icon	Match the surrounding density; use IconButton for icon-only actions.
`disabled`	readable primary	A disabled primary button keeps a tinted action surface with readable text; a pending LoadingButton keeps its filled style.

Copy the package import and adapt the composition to product-owned content and state.

import { Button, IconButton, LoadingButton } from "@conscia-labs/design-system";