Button

Examples

Variants (Default tone)

Negative tone

Static tones

Use on fixed light/dark surfaces where theme semantic colors should not shift. Demo panels use those surfaces (not the page chrome), so static tones stay readable in both light and dark docs mode.

Sizes

Sm 28px · Md 36px (default) · Lg 40px — matching Figma size sets.

Overflow

When width is constrained, the label ellipsizes. Icons stay visible. The full label remains the accessible name.

Icons

Pass any React node into iconStart / iconEnd. Icon size follows the button size; placement follows reading direction in RTL. Until EDS ships icons, demos use Quix icons.

States

Loading preserves button width (content is visually hidden) and centers a spinner, matching Figma.

RTL

Wrap the control (or a parent) in dir="rtl" / lang="fa". Flex order places leading content at the inline-start edge.

API Reference

Accessibility

WCAG success criteria

Why it matters

Buttons are the primary affordance for irreversible actions, form submission, and navigation shortcuts. When they are mislabeled, unreachable by keyboard, or visually ambiguous, people who rely on assistive tech or motor precision lose confidence—and products ship avoidable friction. EDS Button renders a native <button> so activation, disabled behavior, and form integration match platform expectations out of the box.

Keyboard

The component does not trap focus; it participates in the page’s natural focus order.

Screen readers & semantics

Icon-only buttons must include aria-label (or visible text elsewhere that names the control). Do not rely on icon shape alone.

Focus & visuals

• Focus ring: :focus-visible draws a 2px gap + 2px stroke ring outside the control border, using --eds-color-outline-primary (tone-specific overrides for negative and static palettes). The control sets overflow: visible so the ring is never clipped.
• Disabled / loading: Reduced interactivity with cursor: not-allowed (disabled) or cursor: wait (loading); visual treatment uses disabled tokens or opacity per tone.
• Contrast: Text and fill colors come from EDS semantic tokens tuned for each tone × variant pair. Validate final contrast on your surface—especially static tones on photographic or brand backgrounds.
• RTL: iconStart / iconEnd follow inline direction; label and icons reorder with flex so reading order matches dir="rtl".
• Target size: Heights are 28px (sm), 36px (md), and 40px (lg) — above the 24×24px WCAG minimum. They do not meet the 44×44px enhanced target without additional padding or layout spacing around the control.

Build with it

Do

• Use visible, action-oriented labels (“Save changes”, not “Click here”).
• Set aria-label on icon-only buttons; pair with aria-describedby when extra context is needed.
• Mark decorative icons aria-hidden="true" inside iconStart / iconEnd.
• Use loading (not a second click) while async work runs; the label should still describe the action (“Submitting…”).
• Use type="submit" inside forms and type="button" for in-page actions that must not submit.
• Pass aria-expanded / aria-controls when the button opens a menu, dialog, or disclosure you own.

Don’t

• Use a Button without an accessible name (empty children and no aria-label).
• Rely on color alone to signal destructive actions—pair tone="negative" with clear text.
• Re-enable interaction while loading; wait until the operation completes.
• Swap a disabled button for a div with click handlers—use disabled so assistive tech gets the correct state.
• Place icon-only controls closer than ~8px without verifying touch targets on mobile.

// Icon-only — always label
<Button aria-label="Close dialog" iconStart={<IconX />} />

// Loading submit — name stays meaningful
<Button type="submit" loading={isSubmitting}>
  {isSubmitting ? "Submitting…" : "Submit"}
</Button>

// Toggle — expose state
<Button
  aria-expanded={open}
  aria-controls="filters-panel"
  onClick={() => setOpen((v) => !v)}
>
  Filters
</Button>

Quick test

Run this five-minute pass before shipping a flow that uses Button:

1. Keyboard only — Tab to each button; confirm a visible focus ring. Press Enter and Space; confirm activation. Tab past disabled and loading buttons—they should be skipped.
2. Screen reader — With VoiceOver or NVDA, verify each button announces a clear name and “button”. Toggle loading and confirm “busy” (or equivalent) is announced without duplicate activation.
3. Icon-only — Remove visible text; confirm the control is unnamed without aria-label, then add aria-label and confirm the name is read.
4. Zoom 200% — Labels remain visible; focus ring is not clipped.
5. RTL — Set dir="rtl" on a toolbar; confirm icons sit on the inline-start/end edges and labels read in Persian/Arabic order.
6. Contrast spot-check — Primary, outline, and negative variants on your real page background; adjust surface or tone if text or borders fail 4.5:1 (text) / 3:1 (UI components).