v0.27.0

Introduction

Foundations

Layout

Actions & Inputs

Status & Feedback

Utilities

Helpful Links

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!

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

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

function Example() {
  const alert = {
    header: 'Optional Headline',
    messages: [
      {
        text: 'Required description copy.',
        link: {
          text: 'Optional Link',
          href: '#',
        },
      },
    ],
    type: 'success',
    onClose: () => null,
  } as AlertProps;
  return <Button onClick={() => alertsManager.add(alert)}>Trigger Alert</Button>;
}

Note: You should not use the Alert component directly. Instead, inject the AlertsManager component into your app and use the instance created by the createAlertsManager utility function to control which Alerts are displayed.

API

Alert

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

Alert[MessageItem]

Prop Name	Type	Default	Description
`text` *	`string`		Message to be displayed.
`link`	`MessageLinkItem`		See below for usage.

Props ending with * are required

Alert[MessageLinkItem]

Prop Name	Type	Description
`external`	`boolean`	Shows an external icons when the `external` flag is set and target="_blank".
`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

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, 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} />
      {/* ... */}
    </>
  );
}

export const alertsManager = createAlertsManager(); // import this in child components to use alerts
function App() {
  return (
    <>
      {/* ... */}
      <GlobalStyles />
      <AlertsManager manager={alertsManager} />
      {/* ... */}
    </>
  );
}

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);

import { alertsManager } from '../App';
// ...
const alert = {...}; // alert props
alertsManager.add(alert);

createAlertsManager

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

const alertsManager = createAlertsManager();

const alertsManager = createAlertsManager();

`add`

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

alertsManager.add({ messages: [{ text: 'error' }] }, () => null)

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)

alertsManager.remove(key)

Parameters

key: Key of the alert to remove.

Return Value

Contains the alert removed.

`clear`

Removes all alerts.

alertsManager.clear()

alertsManager.clear()

Return Value

Contains the alerts removed.

`subscribe`

Subscribe the the alerts manager.

alertsManager.subscribe((alert) => {})

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.

Beta