Contextual feedback messages for typical user actions with flexible alert messages.
Basic Alerts
Alerts with Icons
Dismissible Alerts
Alerts with Additional Content
Success!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
System Update
A new version of the application is available. This update includes:
- Performance improvements
- Bug fixes
- New dashboard features
Header style: compact vs. punchy
pa-alert__heading defaults to the body font-size and semibold weight (compact look — good for status banners). Pass heading_size="lg" to bump it to the louder, deliberate-read presentation for blocking errors and system updates.
Validation failed
Please fix the errors below.
Saved
Your changes have been stored.
Validation failed
Please fix the errors below.
Saved
Your changes have been stored.
Sizes
Three sizes — size="sm", default, and size="lg" — with clean 0.25rem padding increments and font-size steps from 1.2rem to 1.6rem.
Icon with multi-line content (is_multiline)
Default alignment centres the icon against single-line content. Add is_multiline when an icon sits next to multi-line content (heading + body + actions inside pa-alert__content) so the icon stays at the top with the heading instead of centring against the whole stack.
Heads up
Long body text spans multiple lines. Without is_multiline the icon would float in the vertical middle of the content stack instead of top-aligning with the heading.