Contextual feedback messages for typical user actions with flexible alert messages.
Alertas básicas
Alertas con iconos
Alertas descartables
Alertas con contenido adicional
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
Estilo de encabezado: compacto vs. contundente
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.
Tamaños
Three sizes — size="sm", default, and size="lg" — with clean 0.25rem padding increments and font-size steps from 1.2rem to 1.6rem.
Icono con contenido de varias líneas (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.
Atención
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.