IconButton

Implemented

40×40 circular icon-only button. Used in header for notifications, settings, theme toggle. Dark variant in light mode (#1A2332 bg / white fg), neutral in dark mode.

Categoryatoms

Sourcepatterns/atoms/iconbutton.html

AI HintIcon-only button — ariaLabel is required so the control never ships without a text alternative. navy/neutral/ghost variants, optional pressed and badge slot, decorative brand-accent hovers; visually and functionally 44x44 on every viewport.

Icon-only click target with badge support. Always requires an ariaLabel. FR-CA: Bouton icône avec libellé obligatoire.

IconButton

Interactive atom (Family 1 — Tier 1)

Use for compact actions where an icon carries the meaning.

This component supports light and dark mode.

Usage

import { Star } from '@phosphor-icons/react/dist/ssr'
import { IconButton, PhosphorIcon } from '@epasslive/design-system'

<IconButton icon={<PhosphorIcon icon={Star} size={18} weight="fill" />} ariaLabel="Ajouter aux favoris" variant="ghost" pressed={isFavourite} onClick={() => setFavourite((v) => !v)} />

Accessibility

ariaLabel is required.
When pressed is supplied the button gets aria-pressed.
Tap target is 44×44 CSS pixels in both sizes (sm and md render identically — WCAG 2.5.5, DS-CORR-08-10).

Props

Prop

Type

Default

Description

icon*

React.ReactNode

—

Icon element rendered inside the button.

ariaLabel*

string

—

French action label (e.g. "Fermer", "Ajouter aux favoris").

variant

'navy' | 'neutral' | 'ghost'

navy

Background contrast variant.

size

'sm' | 'md'

md

Tap target size.

pressed

boolean

—

Toggleable state — binds aria-pressed.

badge

{ count?: number; showDot?: boolean }

—

Optional badge overlay.

accent

'teal' | 'indigo' | 'amber' | 'pink'

—

Brand-accent hover: tints hover background (/10) and hover text with the accent color.

Props

Preview

IconButton

Prop

Type

Required

Default

Description

icon

React.ReactNode

Required

—

No description.

ariaLabel

string

Required

—

Required for icon-only buttons (WCAG 4.1.2)

variant

'navy' | 'neutral' | 'ghost'

Optional

'navy'

No description.

size

'sm' | 'md'

Optional

'md'

No description.

badge

{ count?: number; showDot?: boolean }

Optional

—

No description.

pressed

boolean

Optional

False

Sets aria-pressed — for toggle buttons

accent

'teal' | 'indigo' | 'amber' | 'pink'

Optional

—

Decorative-grade brand accent hover — tints hover bg (at /10) + hover text with the accent color instead of the variant's neutral hover. Alpha /10 steps are pre-registered (ADR-027); no new tokens.

Quick use:<IconButton />

Accessibility

ARIA rolebutton

Usage

Import

tsxSnippet

import { IconButton } from "@epasslive/design-system"

Example 1

tsxSnippet

<Button variant="primary">Submit</Button>

Example 2

tsxSnippet

<Button variant="secondary" size="sm">Cancel</Button>

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms