---
id: notification-banner
title: NotificationBanner
---

# NotificationBanner

This component is currently experimental because more research is needed to validate it.

Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.

## How to use

Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.


<code src="@digigov/ui/src/feedback/NotificationBanner/__stories__/Default.tsx" />

You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.

### With success style

<code src="@digigov/ui/src/feedback/NotificationBanner/__stories__/Success.tsx" />

### With dense style

<code src="@digigov/ui/src/feedback/NotificationBanner/__stories__/Dense.tsx" />

### Expanded

<code src="@digigov/ui/src/feedback/NotificationBanner/__stories__/Expanded.tsx" />

## API

See below for a complete reference to all of the props available to the components mentioned here.

<ComponentProps
  componentName={[
    'NotificationBannerContainer',
    'NotificationBannerContent',
    'NotificationBannerHeader',
    'NotificationBannerHeading',
    'NotificationBannerLink',
  ]}
/>