Button

Primary action control with primary/ghost/danger variants and a small size cut.

Preview

Variants Primary, ghost, danger, small.

Preview

Save Cancel Delete

HTMLReact

Copy

<button class="nx-btn nx-btn--primary">Save</button> <button class="nx-btn nx-btn--ghost">Cancel</button> <button class="nx-btn nx-btn--danger nx-btn--sm">Delete</button>

Copy

<NxButton variant="primary">Save</NxButton>
<NxButton variant="ghost">Cancel</NxButton>
<NxButton className="nx-btn--danger nx-btn--sm">Delete</NxButton>

API

React props (NxKit)

React (NxKit) props

Prop	Type	Default	Required	Description
variant	"primary"|"ghost"	"primary"		Visual weight — danger/sm are CSS-only modifiers, applied via className.

Classes

Framework-agnostic classes

Class	Description
.nx-btn	Base
.nx-btn--primary	Accent fill
.nx-btn--ghost	Outline
.nx-btn--danger	Destructive, solid-fill token
.nx-btn--sm	Small size cut

States

disabled

State

Save

loading

State

Saving

Accessibility

• Native <button>; :focus-visible ink outline; :disabled dims + not-allowed cursor.
• Loading state: wrap the label in .nx-btn__label + add a .nx-spinner child and aria-busy="true" plus an aria-label describing the pending action.

Do / Don’t

• ✓Do: Use one primary per view.✕Don’t: Don't put accent-600 text on an accent-50 fill.

Related

Icon button

View in spec →

View source: registry.js ↗