Components / primitives

primitives · @awesome-ds/react

Button

Primary actions with loading and disabled states.

Rules: rule.a11y.wcag-aa, rule.components.state-matrix, rule.foundations.semantic-tokens

State matrix

idlerequired
hoverrequired
focusrequired
activerequired
disabledrequired
loadingrequired

Anatomy

  • native button
  • label
  • loading indicator

Keyboard contract

Enter and Space activate once; disabled and loading states suppress activation.

Screen-reader contract

The native button name remains stable while aria-disabled and busy state are exposed.

Content rules

  • Begin labels with a specific verb.
  • Keep loading text consistent with the action.

Public API

PropTyperequiredDescription
childrenReactNoderequiredVisible accessible label
variant"primary" | "secondary" | "ghost" | "danger"—Semantic action emphasis
size"sm" | "md" | "lg"—Tokenized control size
loadingboolean—Prevents duplicate actions
…nativeButtonHTMLAttributes<HTMLButtonElement>—Native button attributes

Adaptation contracts

RTL
Preserve icon meaning, use logical spacing, and mirror only directional artwork.
High contrast
Keep native outlines and a visible text or border affordance in forced colors.
Reduced motion
Remove hover travel and loading flourish while retaining immediate state feedback.

Verification IDs

Button/loading-disabled, Button/native-activation

Live

Live

Copyable example

import { Button } from "@awesome-ds/react";

<Button loading>Save</Button>