Alert

Show alerts in ui to for assertive and polite messages to users

Installation

npm install --save @gladio/alert

Usage

import Alert from "@gladio/alert"
function App () {
  return <Alert type="assertive">Please upgrade your account to use this feature</Alert>
}

Playground

Code Editor

Props

Along with all props that a div element can accept, following special props are available.

Status

Alert component can be rendered with status prop to determine the themes for alert. Following status are available: info, success, warning and error. The default status is info.

Code Editor
Project successfully created.

Type

A type for alert defines how the alert lives in aria-live region. Passing an assertive type makes the alert readout immediately whereas a polite type put the alert in aria-live="polite" region. The type can be combined with a status to provide any themed alert to be in a required live region. Following types are available: assertive, polite. The default type is polite.

When an assertive type is passed without passsing a status prop, the status will be changed to error.

Code Editor