Alert

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

import { Alert } from 'theme-ui'

<Alert>
  Beep boop, this is an alert!
  <Close sx={{ ml: 'auto', mr: -2 }} />
</Alert>
<Alert>
  Beep boop, this is an alert!
  <Close sx={{ ml: 'auto', mr: -2 }} />
</Alert>

<Alert variant='secondary' sx={{ mb: 2 }}>Secondary</Alert>
<Alert variant='accent' sx={{ mb: 2 }}>Accent</Alert>
<Alert variant='highlight' sx={{ mb: 2 }}>Highlight</Alert>
<Alert variant='secondary' sx={{ mb: 2 }}>Secondary</Alert>
<Alert variant='accent' sx={{ mb: 2 }}>Accent</Alert>
<Alert variant='highlight' sx={{ mb: 2 }}>Highlight</Alert>

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',
    },
  },
}