Alert
Inline persistent notice on a page — for system-level status, not for transient toast messages. Anchored to its surface, not floating.
Four tones
Info, success, warn, danger. Border + icon + title + description. Lives inline.
The June 2026 returns format includes mandatory site coordinates. Existing templates auto-update.
187 payslips generated. Emails sent to all employees.
Estimated stock-out by 16:00. Reorder placed automatically with Dairibord.
Counted cash is $ 240 below expected. Supervisor sign-off required to close shift.
With trailing action
Right-aligned button keeps the alert actionable. Use for things the user can act on without leaving the page.
Push the new fee-balance screen to your parents from Settings.
Do & don't
Use an alert when the user needs to know about something that affects this surface.
Use an alert for action confirmation. That is what a toast is for.
Keep the title scannable — six words or fewer.
Stack three alerts on one page. The user stops parsing them after the second.