---
title: "Notification — React"
canonical: https://sky-ui.cf.sky.com/components/notification/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Notification — React

Notification is a component primarily used for system notifications.

```js
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.

```tsx
<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)](/skycons).

**Tip:** <code>tickCircleLinear</code> is recommended for positive messages.
  <br />
  <code>exclamationTriangleLinear</code> is recommended for negative messages.

### $variant

- `positive` _default_
- `negative`
- `info`

```tsx
<>
  <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.

```tsx

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>}
    </>
  );
}
```

**Tip:** 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](/core/system/position/)