Interaction Icon
Description
The Interaction Icon is a compact, icon-only control for actions or navigation in space-constrained interfaces such as toolbars, table rows, or contextual menus. It renders without a background by default and adopts Button-like visual states on interaction.
Two variants exist: the default Interaction Icon and the styled tooltip variant, which wraps the icon and renders a label on hover.
Icons must be used deliberately. Whenever possible, prefer a labeled button. Icon-only controls are acceptable only when the icon is universally recognizable, a tooltip is provided, or the action opens an intermediate surface (e.g. menu or sheet) rather than executing immediately.
Use Cases
- When triggering a secondary or utility action where space does not permit a labeled button.
- When the icon’s meaning is self-evident from context.
- When a tooltip is provided to confirm the action label on hover or focus.
Usage
Rules & Guidelines
Use the correct HTML element: Use <button> for actions and <a href="…"> for navigation. Never use a <div> or <span> as an interactive control.
Always provide an accessible name: Provide aria-label on every Interaction Icon — the icon CSS class alone is not announced by screen readers.
Tooltips are required where icons are ambiguous: The styled tooltip variant makes intent explicit on hover. For universally recognized icons, the default variant is sufficient.
Do not use for primary actions: Use a labeled button for primary calls to action.
Minimum touch target: 32×32 px.
Animation: On hover, the label slides down from below the icon (120ms ease-out, opacity 0 → 1). On mouse-out, it slides back up and fades (80ms ease-in). Everything is instant for prefers-reduced-motion.
Accessibility
ARIA label: All Interaction Icons must carry aria-label describing the action or destination. Example: aria-label="Delete item".
Keyboard navigation: Reachable via Tab, activated with Enter (links) or Enter / Space (buttons). Circuit’s focus styles satisfy WCAG 2.1 SC 2.4.7.
Visible focus state: Indicated via --dehn-selectyellow (#FEBC39). Do not suppress it.
Tooltip accessibility: The styled tooltip uses a CSS ::after pseudo-element on :hover and is purely visual. The aria-label on the button itself remains the accessible name. Do not rely on data-tooltip as an accessibility mechanism.
Color contrast: Icon color must meet 3:1 against its background (WCAG 2.1 SC 1.4.11).
Disabled state: Use the disabled attribute on <button>. Disabled controls are excluded from the tab order.
Validation: Audit with Lighthouse and verify keyboard operability manually.