in development

Interaction Icon

Description

The Interaction Icon is a compact, icon-only control used to represent actions in space-limited interfaces like toolbars or contextual menus. It displays without a background by default and adopts Button-like visual cues on interaction.

Icons must be used deliberately and only when their function is clear. Whenever possible, use a labeled alternative. Unlabeled icons are acceptable only if:

• The icon is universally recognized,
• A tooltip is provided (on desktop),
• Or it opens an intermediate interface (e.g. menu, sheet), not an immediate action.

Avoid using icons alone for primary or critical actions.

Usage

HTML Element:
Use button for triggering actions, a for navigation (href required). Avoid non-semantic containers.

Accessibility:

• Provide aria-label or title for unlabeled icons.
• Tooltips must be accessible by keyboard.
• Ensure minimum contrast and visible focus styles.
• Use familiar, self-explanatory icons.

Visual Behavior:
The default appearance is icon-only with no background.
All interactive states (hover, focus, active, disabled) must visually behave like those of the Button component.

Keyboard Support:

• Must be focusable and operable with Enter or Space.
• Provide visible focus indication.

Example

Resources

• Interaction icon in Figma