Toast

Overview

Confirm a background or completed action. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Toast when you need to confirm a background or completed action. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<div class="he-toast" role="status"><span>✓</span><div><b>Calibration saved</b><p>The new baseline is active.</p></div><button class="he-icon-button he-icon-button--sm" aria-label="Dismiss"><svg class="he-icon" aria-hidden="true"><use href="/assets/design-system/health-eye-icons.svg#close"></use></svg></button></div>

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

Use a polite live region, provide enough reading time, and persist critical errors elsewhere.

• 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