Alerts

An alert appears at the top right of the interface notifying the user after an action.

Edit the code below to see your changes live!

API

Alert

Prop Name
Type
Default
Description
headerstring

Optional header to display in message.

messages *MessageItem

See below for usage.

typesuccess | error | warning | infosuccess

Determines the style of message to display.

onClose() => void

Function that will be called on close events.

keystring

Key used to identify alert.

fadeAwaybooleanfalse

Autoclose after 5 seconds.

Note: Only valid when used with AlertManager.

Props ending with * are required

Alert[MessageItem]

Prop Name
Type
Default
Description
text *string

Message to be displayed.

linkMessageLinkItem

See below for usage.

Props ending with * are required

Prop Name
Type
Default
Description
externalboolean

Shows an external icons when the external flag is set and target="_blank".

hrefstring

Same as a HTML anchor href attribute.

textstring

Link text to display.

targetstring

Same as a HTML anchor target attribute.

Props ending with * are required

Alerts Manager

AlertsManager Component

Big Design comes with an AlertsManager component that will manage and display which alerts to display and in which order by type. The order of priority from highest to lowest is error, warning, success, info.

To use this component, wrap your app with this component:

Code example

This works in conjunction with an instance created by createAlertsManager function below.

createAlertsManager

The createAlertsManager function returns an instance for managing which alert to display.

add

Adds an alert to the manager with an optional callback on dismiss.

Parameters
  • alert: An object with the same key/values as the alert props.

Return Value

The value of the alert key. If no key is provided, then an auto-generated one will be provided.

remove

Removes an alert by key and displays the next alert, if available.

Parameters
  • key: Key of the alert to remove.

Return Value

Contains the alert removed.

clear

Removes all alerts.

Return Value

Contains the alerts removed.

subscribe

Subscribe the the alerts manager.

Parameters
  • callback: Callback function to run when the alerts list changes. Will pass the alert to display, or null.

Return Value

An unsubscribe method for the subscibed method.

Beta