IconButton

atoms

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.

ARIA Role: button

Demo

Props

Prop	Type	Required	Default	Description
`icon`	`React.ReactNode`	Yes	`—`
`ariaLabel`	`string`	Yes	`—`	Required for icon-only buttons (WCAG 4.1.2)
`variant`	`'dark' \| 'neutral' \| 'ghost'`	No	`'dark'`
`size`	`'sm' \| 'md'`	No	`'md'`
`badge`	`{ count?: number; showDot?: boolean }`	No	`—`
`pressed`	`boolean`	No	`False`	Sets aria-pressed — for toggle buttons

TypeScript Interface

interface IconButtonProps {
  icon: React.ReactNode;
  onClick?: () => void;
  ariaLabel: string;
  variant?: 'dark' | 'neutral' | 'ghost';
  size?: 'sm' | 'md';
  badge?: { count?: number; showDot?: boolean };
  pressed?: boolean;
  disabled?: boolean;
}

Assertions (NASA Rule 5)

[type]ariaLabel must be a non-empty string(NASA Rule 5)
[aria]ariaLabel must describe action, not the icon (e.g. 'Notifications, 1 unread' not 'bell')(WCAG 4.1.2)

Usage

Import

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

Basic

<Iconbutton />

With Variants

<Iconbutton variant="primary" size="md" />