Inline Alert

Overview

Inline Alert delivers contextual feedback, warnings, and status messages directly within the page layout. With 7 semantic variants, 4 appearance styles, and full content visibility control, it adapts to every notification context, from subtle neutral notices to critical danger states, without breaking the surrounding layout.

When should you use them?

Use an inline alert to show feedback tied to a specific part of the page, like a form error, a success confirmation, or a warning about a section. Unlike a toast, it stays in place within the layout, so use it when the message should persist and stay connected to its context.

How should you use them?

• Use an inline alert for persistent, in-context feedback; use a toast for brief, dismissible notifications.
• Match the variant to the message (Danger for errors, Success for confirmations, Warning for caution).
• Use Horizontal layout for short single-line notices, Vertical for longer messages with actions.
• Include actions only when the user can act on the alert, like 'Retry' or 'Undo'.
• Keep the message clear and specific: what happened and what to do next.
• Use an icon alongside color so the alert type isn't signaled by color alone.