Skip to content
3.5.2

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

bash
npm install @nib-components/alert

Usage

jsx
import Alert from '@nib-components/alert';

Interactive demo

Important Information about you cover

This is an optional short message with further, actionable information for the user.
jsx

Props

PropTypeDefaultDescription
typestring"info"Can be one of "info", "warning", "error" or "success".
titlestringThe alert title.
fullWidthbooleanfalseTo set the alert to span the full width of its parent container.
childrennodeThe rest of the contents of the alert, the "message".

Variations

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.

We need your last name to locate your policy.

Warning

Not sure of your admission date?

We have some changes coming in on 1 April this year as part of the government reforms which will affect how our eligibility check works.

Information

$750 hospital excess

You can join nib before 1 April on a $250 or $500 excess and increase your excess after 1 April by logging into Online Services.

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.

Important Information

This is an optional short message with a link

Examples

Alert example
Example of an information alert in online join.
Alert example
Example of a warning alert in online services.