Skip to content

Button

stable

Primary action trigger with variant and size support

ActionsInteractive/Storybook ↗
import { Button } from "@nodus/design-system"
Loading demo…

Props

variant
Type "primary" | "secondary" | "ghost" | "danger"Default "primary"

Visual style variant

size
Type "sm" | "md" | "lg"Default "md"

Button size

loading
Type booleanDefault —

Show spinner and disable. Auto-detects from React 19 useFormStatus when omitted.

Accessibility

  • Renders a native <button> element — keyboard focusable and operable via Enter/Space by default.
  • The loading spinner is aria-hidden; the button remains focusable and retains its label for screen readers.
  • Pass aria-label when the button contains only an icon or non-descriptive text.
  • The disabled prop maps to the native disabled attribute, which removes the element from tab order — use aria-disabled + onClick guard if you need it focusable while inactive.
  • Supports all ButtonHTMLAttributes including aria-describedby, aria-expanded, aria-pressed.
Metadataprimarysecondaryghostdangersmmdlgsemantictypebordermotion
MobileTouch Target

The sm size (28px) falls below the 44px minimum touch target. Use md or lg for primary CTAs on mobile. For icon+label buttons, the label expands the tap area naturally.

Design Rationale

This component was designed to express:

Explore Related

IconButton→

Icon-only action button with accessible label

Badge→

Colored label for status, trust level, or category

Was this helpful?