Contextual feedback messages for typical user actions with flexible alert messages.
Basic Alerts
Alerts with Icons
Dismissible Alerts
Alerts with Additional Content
Always use pa-alert__heading for a separate title element; default sits at the alert's body font-size, add --lg for the punchier presentation. Pair with pa-alert__list for an in-alert <ul>, and a plain <hr> for a subtle divider that picks up an alert-tinted top border automatically.
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.
Storage running low
Your account is approaching the quota limit. The next sync will fail unless you free space:
- Archive old projects you don't actively edit
- Empty your trash folder
- Upgrade to a larger plan
Heading size: default vs. --lg
Same markup either way — always pa-alert__heading. Default size sits at the alert's body font-size for compact status banners ("Validation failed", "Saved", "Connection lost"). Add pa-alert__heading--lg when the alert needs deliberate attention (blocking errors, system updates, quota warnings).
Default (pa-alert__heading)
Validation failed
Please fix the errors below.
Saved
Changes synced 2 seconds ago.
With --lg
Validation failed
Please fix the errors below.
Saved
Changes synced 2 seconds ago.
Alerts with custom actions
Wrap action buttons in pa-alert__actions. The element renders a thin divider above with symmetric padding — same separator pattern as pa-toast__actions, so action-bearing alerts and custom-action toasts feel visually consistent.
System update
A new version of the application is available. This update includes:
- Performance improvements
- Bug fixes
- New dashboard features
Sync failed
We couldn't reach the server. Check your connection and try again.
Cookies disabled
Some features need cookies to work properly.
Sizes
Three sizes — pa-alert--sm, default, and pa-alert--lg. Both padding and font-size step at each size; themes can retune via the $alert-padding-{sm,lg}-{v,h} and $alert-font-size-{sm,lg} SCSS variables.
Small — pa-alert--sm
Default
--sm / --lg modifier.
Large — pa-alert--lg
Outline Alerts
Theme Color Alerts
Theme Color Outline Alerts
Icon + multi-line content
When you pair an pa-alert__icon with a multi-line pa-alert__content (heading + body + actions), add pa-alert--multiline so the icon stays at the top with the heading instead of vertically centring against the whole stack. Side by side below — the left example uses the modifier; the right one shows what happens without it.
With --multiline
Heads up
This alert spans several lines, so we want the info icon to sit at the top with the heading rather than floating in the vertical middle of the stack.
Without (default centring)
Heads up
This alert spans several lines, so we want the info icon to sit at the top with the heading rather than floating in the vertical middle of the stack.
Status strip layout
Real-world example — small, icon-prefixed alerts arranged in a row above a section. pa-alert--sm keeps each pill compact so multiple states fit on one line at desktop widths.
CSS Classes Reference
Base & Variants
pa-alert- Base alert containerpa-alert--primary- Primary/accent colorpa-alert--secondary- Secondary/muted colorpa-alert--success- Success (green)pa-alert--danger- Danger/error (red)pa-alert--warning- Warning (yellow/orange)pa-alert--info- Information (blue)pa-alert--light- Light backgroundpa-alert--dark- Dark background
Outline Variants
pa-alert--outline-primary- Primary outline (no background)pa-alert--outline-success- Success outlinepa-alert--outline-danger- Danger outlinepa-alert--outline-warning- Warning outlinepa-alert--outline-info- Info outline
Theme Color Variants (1-9)
pa-alert--color-{1-9}- Filled theme color slotpa-alert--outline-color-{1-9}- Outline theme color slot
Sizes & Modifiers
pa-alert--sm— Small:0.5rem / 1rempadding,font-size-xs(12px)(default)— Default:0.75rem / 1.25rempadding,font-size-sm(14px)pa-alert--lg— Large:1rem / 1.5rempadding,font-size-base(16px)pa-alert--dismissible— Adds inline-end padding so the absolutely-positioned close button doesn't overlap textpa-alert--multiline— Opts out of the defaultalign-items: centerso an icon next to multi-linepa-alert__contentstays top-aligned with the heading instead of centring against the content stack
V steps 0.5 → 0.75 → 1rem; H steps 1 → 1.25 → 1.5rem — clean 0.25rem increments.
Themes can retune the scale via the
$alert-padding-{v,h},
$alert-padding-{sm,lg}-{v,h} and
$alert-font-size-{sm,lg} SCSS variables in
variables/_components.scss (all !default).
Sub-elements
pa-alert__icon— Leading icon (flex-shrink: 0, font-size-base)pa-alert__content— Content wrapper (flex: 1; min-width: 0) — use it when there's an icon AND structured content (heading, paragraph, list, actions); drop it when the alert has no iconpa-alert__heading— Alert heading/title (h4); defaults to body font-size + semiboldpa-alert__heading--lg— Heading bumped tofont-size-lgfor the punchy, deliberate-read presentationpa-alert__list—<ul>inside the alert; spacing to siblings handled by the alert's flex gappa-alert__actions— Action buttons row, sits below a thin divider with symmetric padding (same separator pattern aspa-toast__actions); always renders on its own row at the bottompa-alert__close— Close/dismiss button (absolutely positioned, inline-end — RTL-aware)
Layout note: the alert is display: flex; flex-wrap: wrap with gap: $spacing-sm.
Structural children (__heading, __list, __actions, top-level <p>, <hr>)
get flex-basis: 100% so they take their own row; inline siblings (__icon, __content, bare text + <strong>) stay on the flex row.