Alert
Alerts are used to communicate important information to the user. They can be used to inform users about service changes, provide feedback to user actions or communicate general information. Alerts should be short, clear and easy to understand. Icons and colour should be used to help convey content and urgency. The alert will expand to the width of the content, up until the width of its parent element, at which point it will wrap.
Installation
npm install @nib-components/alert
Note: You will also need to install the peerDependencies @nib/icons and @nib-components/theme.
Usage
import Alert from '@nib-components/alert';
Interactive demo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | "info" | Can be one of "info", "warning", "error" or "success". |
title | node | The alert title. | |
fullWidth | boolean | false | To set the alert to span the full width of its parent container. |
variation | string | loud | The alert variation. Can be one of "loud" or "soft". |
titleComponent | string | The underlying component of the Alert title. Must be one of h1, h2, h3, h4, h5, h6, div, label, span, header. | |
children | node | The rest of the contents of the alert, — the "message". |
Types
Colour and icons are used to help convey the content and urgency of the alert.
Avoid using colour alone as people with visual acuity or colour blindness may skip over this important information. This is why we use icons too.
The type prop provides a number of Alert variations, each conveying a different meaning to the user.
Success
Success! Your cover has now been updated.
Error
Your last name is missing.
Warning
Not sure of your admission date?
Information
$750 hospital excess
Variations
There are two variations available for the Alerts: loud and soft.
Loud
The loud variation is used by default and can be seen in the example below. This is most frequently used for system notifications and urgent information that needs to stand out as much as possible.
Be careful!
Where possible, we recommend using our more modern alert where possible; the soft variation.
Soft
The soft variation should be used for providing contextual information and general notifications.
Be careful!
This component also comes with a background prop which can be either white or light (a light version of the type's colour).
Alert copy
All alerts should have a title, which should be short and descriptive.
An alert message is optional and if included should also be short and descriptive. An alert message can include links that redirect the user to further information or next steps.