v0.27.0
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!
Prop Name | Type | Default | Description |
---|---|---|---|
header | string |
| Optional header to display in message. |
messages * | MessageItem |
| See below for usage. |
type | success | error | warning | info | success | Determines the style of message to display. |
onClose | () => void |
| Function that will be called on close events. |
key | string |
| Key used to identify alert. |
autoDismiss | boolean | false | Auto dismiss after 5 seconds. Note: Only valid when used with AlertManager. |
Props ending with * are required
Prop Name | Type | Default | Description |
---|---|---|---|
text * | string |
| Message to be displayed. |
link | MessageLinkItem |
| See below for usage. |
Props ending with * are required
Prop Name | Type | Default | Description |
---|---|---|---|
external | boolean |
| Shows an external icons when the |
href | string |
| Same as a HTML anchor href attribute. |
text | string |
| Link text to display. |
target | string |
| Same as a HTML anchor target attribute. |
Props ending with * are required
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, put it in your root component (e.g. place it after GlobalStyles
component):
Code example
This works in conjunction with an instance created by createAlertsManager
function below. You need to export alertsManager
instance and then you can import it in child components in order to trigger alert:
Code example
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.
alert
: An object with the same key/values as the alert props.
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.
key
: Key of the alert to remove.
Contains the alert removed.
clear
Removes all alerts.
Contains the alerts removed.
subscribe
Subscribe the the alerts manager.
callback
: Callback function to run when the alerts list changes. Will pass the alert to display, or null.
An unsubscribe method for the subscibed method.