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>
  );
}
() => {
  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);

  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>

      <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>
      </div>
    </React.Fragment>
  );
}
() => {
  const [showSuccess, setShowSuccess] = React.useState(false);
  const [showDelete, setShowDelete] = React.useState(false);
  const [showError, setShowError] = React.useState(false);
  const [showInfo, setShowInfo] = 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>

      <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>
      </div>
    </React.Fragment>
  );
}