Notification - React

View on Figma View on GitHub

import { Notification } from '@sky-uk/ui-core';

The Notification component is used to provide system-level notifications to users. It comprises a message and an optional icon. The Notification.CloseButton sub-component may be used to dismiss the notification.

<Notification>Title of the notification.</Notification>

Props

src

The src requires the content of an svg tag of the icon that you want to render. It is recommended to use icons from the @sky-uk/skycons package. (See Skycons).

tickCircleLinear is recommended for positive messages.

exclamationTriangleLinear is recommended for negative messages.

$variant

positive default
negative
info

<>
  <Notification $variant="positive" src={tickCircleLinear}>Positive notification.</Notification>
  <Notification $variant="negative" src={exclamationTriangleLinear}>Negative notification.</Notification>
  <Notification $variant="info" src={informationCircleLinear}>Info notification.</Notification>
</>

Sub Components

CloseButton

A <CloseButton /> can be added to the body of the Notification for dismissible components.

function Example() {
  const [closed, setClosed] = React.useState(false);

  const handleClosed = () => {
    setClosed(true);
  }

  return (
    <>
      <Notification onClosed={handleClosed}>
        Title of the notification.
        <Notification.CloseButton aria-label="Close example notification" />
      </Notification>
      {closed && <Text>You closed the Notification</Text>}
    </>
  );
}

When using a close button make sure to provide a descriptive aria-label which provides context i.e. "Dismiss notification 1 of 3" or "Dismiss Sign-in notification".

System Modifiers

The Notification component also supports the props applied using the following system modifiers:

position