Alert

Overview

Alerts are non-disruptive messages that appear at the top right of the window and provide quick, at-a-glance feedback on the outcome of an action.

When to use:

  • To update merchants about a change or give them advice.

Implementation

Edit the code below to see your changes live!

function Example() {
  const alert: AlertProps = {
    header: 'Optional Headline',
    messages: [
      {
        text: 'Required description copy.',
        link: {
          text: 'Optional Link',
          href: '#',
        },
      },
    ],
    type: 'success',
    onClose: () => null,
  };

  return <Button onClick={() => alertsManager.add(alert)}>Trigger Alert</Button>;
}

Props

Prop name
Type
Default
Description
headerstring

Optional header to display in message.

messages *MessageItem

See MessageItem 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.

autoDismissbooleanfalse

Auto dismiss after 5 seconds.
Note: Only valid when used with AlertManager.

Props ending with * are required

AlertsManager

BigDesign 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

export const alertsManager = createAlertsManager(); // import this in child components to use alerts

function App() {
  return (
    <>
      {/* ... */}
      <GlobalStyles />
      <AlertsManager manager={alertsManager} />
      {/* ... */}
    </>
  );
}

Add alert

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

import { alertsManager } from '../App';

// ...

const alert = {...}; // alert props
alertsManager.add(alert);

API

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

const alertsManager = createAlertsManager();

add

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

alertsManager.add({ messages: [{ text: 'error' }] }, () => null)
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.

alertsManager.remove(key)
Parameters

  • key: Key of the alert to remove.

Return Value

Contains the alert removed.

clear

Removes all alerts.

alertsManager.clear()
Return Value

Contains the alerts removed.

subscribe

Subscribe the the alerts manager.

alertsManager.subscribe((alert) => {})
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.