Icon button

Overview

Trigger a familiar compact action. It transforms explicit intent into a command or navigation event without changing the accessible name during processing.

When to use

Use HE/Icon button when you need to trigger a familiar compact action. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<button class="he-icon-button" aria-label="Search"><svg class="he-icon" aria-hidden="true"><use href="/assets/design-system/health-eye-icons.svg#search"></use></svg></button><button class="he-icon-button" aria-label="More options"><svg class="he-icon" aria-hidden="true"><use href="/assets/design-system/health-eye-icons.svg#more-horizontal"></use></svg></button><button class="he-icon-button" disabled aria-label="Settings unavailable"><svg class="he-icon" aria-hidden="true"><use href="/assets/design-system/health-eye-icons.svg#settings"></use></svg></button>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

Always supply an accessible label and visible tooltip for unfamiliar icons.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components