Contextual feedback messages for typical user actions. Pure Admin alerts handle
dismiss, headings, lists, in-alert actions, icons, and theme color slots — all
driven by props on a single <Alert /> component.
Basic Alerts
Alerts with Icons
Dismissible Alerts
Alerts with Additional Content
Pair headingText with the list and actions snippets to build full-bleed alerts. Add headingSize='lg' for the punchy, deliberate-read presentation.
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. headingSize='lg'
Same markup either way. Default sits at the alert's body font-size for compact status banners (Validation failed, Saved, Connection lost). Add headingSize='lg' when the alert needs deliberate attention (blocking errors, system updates, quota warnings).
Default headingText
Validation failed
Please fix the errors below.
Saved
Changes synced 2 seconds ago.
With headingSize="lg"
Validation failed
Please fix the errors below.
Saved
Changes synced 2 seconds ago.
Alerts with custom actions
The actions snippet renders a thin divider above with symmetric padding — same separator pattern as 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 — sm, default, and lg. Both padding and font-size step at each size. Themes can retune via the $alert-padding and $alert-font-size SCSS variables (sm/lg overrides + v/h axes).
Small — size="sm"
Default
size prop. Large — size="lg"
Outline Alerts
Theme Color Slot Alerts
Custom theme color slots (1-9). Colors are defined by the active theme — invisible in the base theme.
Outline Theme Color Slot Alerts
Icon + multi-line content
When you pair an icon with a multi-line content stack (heading + body + actions), set isMultiline so the icon stays at the top with the heading instead of vertically centring against the whole stack.
With isMultiline
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. size='sm' keeps each pill compact so multiple states fit on one line at desktop widths.
CSS classes reference
Base & variants
pa-alert — Base alert container pa-alert--primary — Primary/accent color pa-alert--secondary — Secondary/muted color pa-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 background pa-alert--dark — Dark background
Outline variants
pa-alert--outline-primary / --outline-success / --outline-danger pa-alert--outline-warning / --outline-info
Theme color variants (1-9)
pa-alert--color-{1-9} — Filled theme color slot
pa-alert--outline-color-{1-9} — Outline theme color slot Sizes & modifiers
pa-alert--sm — Small: 0.5rem / 1rem padding, font-size-xs (12px)
(default) — Default: 0.75rem / 1.25rem padding, font-size-sm (14px)
pa-alert--lg — Large: 1rem / 1.5rem padding, font-size-base (16px)
pa-alert--dismissible — Adds inline-end padding for the close button
pa-alert--multiline — Opts out of default align-items: center; icon + multi-line
content stays top-aligned with the heading instead of
centring against the whole 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.
Sub-elements
pa-alert__icon — Leading icon (flex-shrink: 0, font-size-base)
pa-alert__content — Content wrapper (flex: 1; min-width: 0)
pa-alert__heading — Title (h4); body font-size + semibold by default
pa-alert__heading--lg — Heading bumped to font-size-lg (use headingSize="lg")
pa-alert__list — <ul> inside the alert
pa-alert__actions — Action button row, sits below a thin divider
(same separator pattern as pa-toast__actions)
pa-alert__close — Close button (absolutely positioned, inline-end) Layout note: the alert is display: flex; flex-wrap: wrap.
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 and <strong>) stay on the flex row.
Component props
interface AlertProps {
variant?: 'primary' | 'secondary' | 'success' | 'danger'
| 'warning' | 'info' | 'light' | 'dark'; // default 'primary'
size?: 'sm' | 'lg'; // default = no modifier
themeColor?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; // takes priority over variant
isOutline?: boolean;
isDismissible?: boolean;
headingSize?: 'lg'; // applies pa-alert__heading--lg (since v1.7.0)
isMultiline?: boolean; // applies pa-alert--multiline (since v1.7.0)
headingText?: string;
class?: string;
// Snippets
icon?: () => any;
children?: () => any;
list?: () => any; // contents go inside <ul class="pa-alert__list">
actions?: () => any; // buttons inside .pa-alert__actions (border-top divider)
// Events
ondismiss?: () => void;
}