Skip to content
Theme UI
GitHub

Alert

Component for displaying messages, notifications, or other application state.

import { Alert } from 'theme-ui'
Beep boop, this is an alert!
Secondary
Accent
Highlight

If screen readers should immediately start reading the alert aloud, add role="alert".

Variants

Alert variants can be defined in theme.alerts. The Alert component uses theme.alerts.primary as its default variant.

// example theme variants
{
alerts: {
primary: {
color: 'background',
bg: 'primary',
},
muted: {
color: 'text',
bg: 'muted',
},
},
}
Edit the page on GitHub
Previous:
Close
Next:
Divider