Alert Button
Last Updated: September 2026Alert buttons are a button style reserved for use ONLY inside of alerting elements such as toasts, banner, or notifications.
Source CodeAnatomy
link- 1Primary
- 2Secondary
- 3Tertiary
Variants
linkPrimary
Strong semantic fill. Pair with matching intent.
Secondary
Subtle semantic background for a supporting action.
Tertiary
Text-only. Common for dismiss actions.
Intents
intent drives semantic colors: info, success, warning, danger.
Usage Guidelines
linkWhen to use
- •For actions embedded in Banner, AlertNotification, or similar messaging UI.
- •When the button color should match the alert intent (info, success, warning, danger).
- •For compact confirm / dismiss pairs inside an alert.
When not to use
- •For page-level CTAs — use Button instead.
- •For navigation between pages — use Link.
- •Outside messaging surfaces where semantic intent colors are not needed.
Match variant+intent to the parent alert and keep labels short.
Don't use AlertButton as a general page CTA — use Button.
Use danger intent only for destructive or blocking alert actions.
Don't mix intents in one alert — keep actions on the same intent.
Behaviors
linkRequired props
- •variant and intent are both required.
- •Renders a native button with type="button".
Composition
- •Banner and AlertNotification wire AlertButton for action / dismissAction slots.
- •Prefer those slots when building alerts so styling stays consistent.
Content Guidelines
linkLabels
- •Use short verb phrases ('Review', 'Reschedule', 'Dismiss').
- •Sentence case; avoid vague labels like 'OK'.
Accessibility
linkText & Labels
- •Provide a clear visible label — AlertButton has no icon-only mode.
- •Ensure the parent alert already exposes role="alert" context.
ARIA attributes
- •Standard button semantics; disabled via the disabled attribute when needed.
Keyboard Support
- •Tab → focus.
- •Space / Enter → activate.
WCAG Compliance Standards
FAQs
linkShould I use AlertButton or Button inside alerts?
Use AlertButton so colors track the alert intent. Use Button for non-messaging UI.
How do Banner and AlertNotification use this?
They map action to primary and dismissAction to tertiary with the alert's intent.
Can I omit intent?
No — intent is required and selects the semantic color tokens.