Skip to main content
Kaleidoscope

Notification

DS

Notifications communicate to users that an action or error has occurred when there would otherwise be little or no visual feedback in the interface.

Default

Use Notifications to give feedback to users that an action has occurred.

Editable example
() => {
  const [showNotification, setShowNotification] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setShowNotification(true)}>Show</Button>
      <div style={{ position: "fixed", top: 96, right: 16, zIndex: 900 }}>
        <Notification isShowing={showNotification} onClose={() => setShowNotification(false)}>
          Page cloned
          <Button>Go to page</Button>
        </Notification>
      </div>
    </React.Fragment>
  );
}

Best practices

  1. An action can be placed within a notification, such as the ability to undo a destructive action, or view content created by an action.
  2. If the Notification closes automatically on a timer, make sure any actions within the notification can be accessed via other means (such as a keyboard shortcut for undo, or an action elsewhere in the UI to open a cloned page).
  3. Keep the copy short, clear, and concise. This is especially true for timed notifications, but also applies for notifications that require an interaction to dismiss. No one wants to try and read a massive notification that takes up a quarter of the screen.

Types

Editable example
() => {
  const [showSuccess, setShowSuccess] = React.useState(false);
  const [showDelete, setShowDelete] = React.useState(false);
  const [showError, setShowError] = React.useState(false);
  const [showInfo, setShowInfo] = React.useState(false);
  const [showCaution, setShowCaution] = React.useState(false);

  return (
    <React.Fragment>
      <Button type={ButtonType.Secondary} onClick={() => setShowSuccess(true)}>Show success</Button>
      <Button type={ButtonType.Secondary} onClick={() => setShowDelete(true)}>Show delete</Button>
      <Button type={ButtonType.Secondary} onClick={() => setShowError(true)}>Show error</Button>
      <Button type={ButtonType.Secondary} onClick={() => setShowInfo(true)}>Show info</Button>
      <Button type={ButtonType.Secondary} onClick={() => setShowCaution(true)}>Show caution</Button>

      <div style={{ position: "fixed", top: 96, right: 16, zIndex: 900 }}>
        <Notification isShowing={showSuccess} onClose={() => setShowSuccess(false)} type={NotificationType.Success}>
          Page cloned <Button>Go to page</Button>
        </Notification>
        <Notification isShowing={showDelete} onClose={() => setShowDelete(false)} type={NotificationType.Delete}>
          Thing deleted <Button>Undo</Button>
        </Notification>
        <Notification isShowing={showError} onClose={() => setShowError(false)} type={NotificationType.Error}>
          Accepted pages can't be deleted
        </Notification>
        <Notification isShowing={showInfo} onClose={() => setShowInfo(false)} type={NotificationType.Info}>
          This is an informative tid bit for you
        </Notification>
        <Notification isShowing={showCaution} onClose={() => setShowInfo(false)} type={NotificationType.Caution}>
          This is a caution
        </Notification>
      </div>
    </React.Fragment>
  );
}