Button

Usage

import { Button } from '@epasslive/design-system'

<Button variant="primary" onClick={save}>Enregistrer</Button>
<Button variant="secondary" onClick={cancel}>Annuler</Button>
<Button variant="ghost" onClick={goBack}>Retour</Button>
<Button variant="danger" onClick={handleDelete}>Supprimer</Button>

// Sizes
<Button size="sm">Compact</Button>
<Button size="md">Default</Button>
<Button size="lg">Large</Button>

// States
<Button loading>En cours...</Button>
<Button disabled>Indisponible</Button>
<Button fullWidth>Passer à l'étape suivante</Button>

// Form integration
<Button type="submit" variant="primary">Soumettre</Button>

When to use

• primary — submit, save, CTA. One per view max.
• secondary — cancel, back, alternate flow.
• ghost — tertiary actions, link-styled helpers.
• danger — delete, refund, revoke. Always pair with a confirm dialog.

Variants

• primary — bg-ep-btn-primary text-ep-text-inverse hover:bg-ep-btn-primary-hover. White text on teal (D-HOME-P3e 2026-08-11).
• secondary — outlined teal border + teal text + teal/10 hover bg.
• ghost — teal text only + teal/10 hover bg. No border.
• danger — bg-ep-semantic-error-bg text-ep-text-inverse. Red surface, white text.

Sizes

All sizes are pinned to min-h-[var(--ep-tap-min)] (44px) for WCAG 2.5.5 (44×44px minimum touch target). The visual difference is padding and font-size only:

• sm — px-3 text-ep-sm (12px horizontal padding, 14px text)
• md — px-4 text-ep-sm (16px horizontal padding, 14px text) — default
• lg — px-5 text-ep-base (20px horizontal padding, 16px text)

States

• default — interactive, full opacity.
• hover — primary darkens via bg-ep-btn-primary-hover; secondary/ghost gain bg-ep-text-teal/10 overlay; danger reduces opacity 10%.
• focus — 2px teal focus ring + 2px ring offset (focus-visible:ring-2 focus-visible:ring-ep-teal focus-visible:ring-offset-2).
• disabled — disabled:opacity-70 disabled:cursor-not-allowed. Interaction is blocked via the native disabled attribute.
• loading — sets aria-busy="true" + disables interaction. Visual spinner placeholder (DS-INT backlog).

Accessibility

The root is a native <button> with a visible focus ring (focus-visible:ring-2 focus-visible:ring-ep-teal focus-visible:ring-offset-2). When loading is true the component sets aria-busy="true" and disables interaction. Contrast meets WCAG 2.2 AA in both light and dark modes (D-HOME-P3e 2026-08-11: primary now uses white text on teal for stronger subjective contrast).

Dark mode

Primary uses bg-ep-btn-primary (teal, theme-stable) with text-ep-text-inverse (white in both themes since D-HOME-P3e). Danger uses bg-ep-semantic-error-bg with text-ep-text-inverse. Both tuned for WCAG 2.2 AA.

Inherited props

As a native <button> wrapping React.ButtonHTMLAttributes, the component accepts all standard HTML button attributes: onClick, type (button/submit/reset),disabled, name, value, form, formAction, autoFocus,aria-*, data-*, etc. children is the only prop excluded from the inheritance (typed explicitly to React.ReactNode).

Props