Skip to content

Alert

Screenreader friendly alert messages. In many apps developers add "alert" messages when network events or other things happen. Users with assistive technologies may not know about the message unless you develop for it.

The Alert component will announce to assistive technologies whatever you render to the screen. If you don't have a screenreader on you won't notice a difference between rendering <Alert> vs. a <div>.

Installation

npm install @reach/alert
# or
yarn add @reach/alert

And then import the components you need:

import Alert from "@reach/alert";

Alert Props

PropTypeRequired
element propsspreadn/a
typeenum "assertive" or "polite"false
childrennodefalse

Alert element props

Type: spread

Any props not listed above will be spread onto the underlying div element.

❗️ Woah! Something went wrong.

Alert type

Type: enum "assertive" | "polite" default: "polite"

Controls whether the assistive technology should read immediately ("assertive") or wait until the user is idle ("polite").

<Alert type="polite">
  This is the default
</Alert>

<Alert type="assertive">
  If a screenreader is currently reading something and
  you render this, it will interrupt the user and read
  this immediately.
</Alert>

You should probably stick with polite most of the time.

Alert children

Type: node

Regular React children.

<Alert>
  <p>Whatever you want here</p>
  <p>Is fine.</p>
</Alert>