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
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. isHeadingLarge
Default headingText
Validation failed
Please fix the errors below.
Saved
Changes synced 2 seconds ago.
With isHeadingLarge
Validation failed
Please fix the errors below.
Saved
Changes synced 2 seconds ago.
Alerts with custom actions
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
Small — size="sm"
Default
size prop. Large — size="lg"
Outline Alerts
Theme Color Slot Alerts
Outline Theme Color Slot Alerts
Icon + multi-line content
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
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 isHeadingLarge prop)
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;
isHeadingLarge?: boolean; // 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;
}