Alert

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

import { Alert } from 'theme-ui'

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

<Alert variant='secondary' mb={2}>Secondary</Alert>
<Alert variant='accent' mb={2}>Accent</Alert>
<Alert variant='highlight' mb={2}>Highlight</Alert>
<Alert variant='secondary' mb={2}>Secondary</Alert>
<Alert variant='accent' mb={2}>Accent</Alert>
<Alert variant='highlight' 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',
    },
  },
}