Notifications

Attention-grabbing and non-dismissable component that allows for extended, richly formatted body content.

Notifications are intended to be displayed within the document flow, not floating or user-dismissable like Snackbar. They can be statically visible, or transitioned in and out of view.

Basic Notification

Notifications must include an icon. Review the docs on including icons in your project. Any nodes can be supplied for the message content

Note: It is recommended to include the iconLabel prop with a short label for clarity, ex: iconLabel="Error", unless this would be repetitive of the Notification content.

<>
  <Notification icon={<Info />}>
    <Typography>We wanted to make you aware of this information.</Typography>
  </Notification>
  <Notification type="success" icon={<Done />} margin={{ top: 4 }}>
    <Typography>This process has been completed successfully.</Typography>
  </Notification>
  <Notification type="info" icon={<Info />} margin={{ top: 4 }}>
    <Typography>
      You may find this information useful, <Link href="javascript;;">read the article</Link>.
    </Typography>
  </Notification>
  <Notification type="error" icon={<Error />} iconLabel="Error" margin={{ top: 4 }}>
    <Typography>It looks like you may have some missing or invalid information.</Typography>
  </Notification>
</>

<>
  <Notification icon={<Info />}>
    <Typography>We wanted to make you aware of this information.</Typography>
  </Notification>
  <Notification type="success" icon={<Done />} margin={{ top: 4 }}>
    <Typography>This process has been completed successfully.</Typography>
  </Notification>
  <Notification type="info" icon={<Info />} margin={{ top: 4 }}>
    <Typography>
      You may find this information useful, <Link href="javascript;;">read the article</Link>.
    </Typography>
  </Notification>
  <Notification type="error" icon={<Error />} iconLabel="Error" margin={{ top: 4 }}>
    <Typography>It looks like you may have some missing or invalid information.</Typography>
  </Notification>
</>

Notification Types

Due to the intentful nature of Notifications, this component uses the type property to provide a pre-determined meaningful color, ex: green for the "success" type. Contrary to other components using a color prop which references theme palette colors such as "primary", the Notification is not tied to palette colors, with the exception of the error type.

You may update the colors used via the theme overrides and using the key of UnifiNotification, such as the following:

const customTheme = {
  themeName: 'My theme',
  overrides: {
    UnifiNotification: {
      typeSuccess: {
        backgroundColor: '#36B27E',
        color: '#2D2D2E',
      },
    },
  },
};

const customTheme = {
  themeName: 'My theme',
  overrides: {
    UnifiNotification: {
      typeSuccess: {
        backgroundColor: '#36B27E',
        color: '#2D2D2E',
      },
    },
  },
};

Animation and Visibility

A Notification's visibility can be programmatically controlled, and includes transition animation.

To hide a Notification, set enableTransition and employ state management to toggle the visible property.

The demo shows how to use createRef() to shift focus to the Notification upon it being made visible so that the contents are read out for assistive technology.

Note for use with forms validation: An additional recommendation if using to support form validation messages is to include a skip link within the Notification to the first form field with an error. The skip link may be visible or hidden with <Typography variant="srOnly">.

function NotificationVisibility() {
  const [visibility, updateVisibility] = React.useState(false);

  const notification = React.createRef();

  function focusNotification() {
    if (visibility && notification.current) {
      notification.current.focus();
    }
  }

  function toggleVisibility() {
    updateVisibility(!visibility);
  }

  return (
    <>
      <Button margin={{ bottom: 4 }} onClick={toggleVisibility} color="neutral">
        Toggle Notification
      </Button>

      <Notification
        icon={<Error />}
        iconLabel="Error"
        type="error"
        enableTransition
        visible={visibility}
        margin={{ bottom: 4 }}
        onEntered={focusNotification}
        ref={notification}
      >
        <Typography>
          It looks like you may have some missing or invalid information. Please review the issues
          noted below the fields.
        </Typography>
      </Notification>

      <div>
        <TextField
          variant="outlined"
          error
          id="invalid-field"
          label="Error"
          defaultValue="Invalid entry"
          margin="normal"
          helperText="This value is incorrect"
        />
      </div>
    </>
  );
}

function NotificationVisibility() {
  const [visibility, updateVisibility] = React.useState(false);

  const notification = React.createRef();

  function focusNotification() {
    if (visibility && notification.current) {
      notification.current.focus();
    }
  }

  function toggleVisibility() {
    updateVisibility(!visibility);
  }

  return (
    <>
      <Button margin={{ bottom: 4 }} onClick={toggleVisibility} color="neutral">
        Toggle Notification
      </Button>

      <Notification
        icon={<Error />}
        iconLabel="Error"
        type="error"
        enableTransition
        visible={visibility}
        margin={{ bottom: 4 }}
        onEntered={focusNotification}
        ref={notification}
      >
        <Typography>
          It looks like you may have some missing or invalid information. Please review the issues
          noted below the fields.
        </Typography>
      </Notification>

      <div>
        <TextField
          variant="outlined"
          error
          id="invalid-field"
          label="Error"
          defaultValue="Invalid entry"
          margin="normal"
          helperText="This value is incorrect"
        />
      </div>
    </>
  );
}

Notifications

Basic Notification

Notification Types

Animation and Visibility

Properties

<Notification />