Button

The primary action control. Use exactly one accent button per view as the main call to action; everything else is neutral, quiet or outline. Semantic fills (positive / notice / negative) reserve colour for genuine confirm / caution / destructive actions.

Signature

Density

Viewport

Theme follows the navbar ☀/☾ toggle

Live demo

Open ↗

When to use

• Use it when Trigger an action — submit, save, confirm, open. Exactly one accent button per view as the primary action.
• Reach for something else when Navigating to another page (use a link), or toggling a single setting (use Switch).

Accessibility

Operable with Enter and Space; isLoading sets aria-busy and blocks activation. Icon-only? Use IconButton with an aria-label. The focus ring (--focus-ring) must stay visible.

Import

const { Button } = window.PrismDesignSystem_39d121;

Examples

Primary + semantic

<Button variant="accent">Save changes</Button>
<Button variant="positive">Approve</Button>
<Button variant="negative">Delete</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">XL · TV</Button>

With icon + loading

<Button icon={<RefreshCw />} isLoading={saving} onPress={save}>
  {saving ? "Saving…" : "Save"}
</Button>

Props

Prop	Type	Required	Description
variant	"accent" | "neutral" | "quiet" | "outline" | "negative" | "positive" | "notice"	—	Visual emphasis. accent is the single primary action per view; positive/notice/negative are semantic confirm/caution/destructive fills.
size	"sm" | "md" | "lg" | "xl"	—	Control height. xl is for TV / remote-friendly surfaces.
type	"button" | "submit" | "reset"	—
isDisabled	boolean	—
isLoading	boolean	—	Shows an in-button spinner, sets aria-busy and blocks interaction.
fullWidth	boolean	—
icon	React.ReactNode	—	Leading icon node (e.g. a Lucide <svg>). Replaced by the spinner while loading.
iconEnd	React.ReactNode	—	Trailing icon node.
onPress	(e: React.MouseEvent) =&gt; void	—
onClick	(e: React.MouseEvent) =&gt; void	—
children	React.ReactNode	—
className	string	—