@neo4j-ndl/react/skills/ndl-react/components/banner.md

React implementation of Neo4j Design System

# Banner

Import: `import { Banner } from '@neo4j-ndl/react'`

## Props

### Banner

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `children` | `ReactNode` |  |  | Content to be shown in the banner. |
| `hasIcon` | `boolean` |  | `false` | Shows a status icon. The icon is based on the value of the `variant` prop |
| `isAlert` | `boolean` |  | `false` | Sets the role to alert |
| `isCloseable` | `boolean` |  | `false` | If the banner is closeable. Renders an icon button in the top right corner |
| `onClose` | `((e?: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>) => void)` |  |  | Event handler for when the close icon is clicked |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `usage` | `'global' \| 'inline'` |  | `inline` | How the banner is used. |
| `variant` | `'danger' \| 'info' \| 'neutral' \| 'success' \| 'warning'` |  | `info` | The variant of the banner |

### Banner.Actions

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | ✅ |  |  |
| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |

### Banner.Description

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | ✅ |  |  |
| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |

### Banner.Header

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | ✅ |  |  |
| `ref` | `Ref<HTMLSpanElement>` |  |  | A ref to apply to the root element. |

## Accessibility

## Implementation guidelines

The `isAlert` prop must be set to `true` for the banner to be given an alert role, which is used by screen readers. If this role is not wanted, make sure to set the prop to `false`.

## Examples

### Closeable

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Banner } from '@neo4j-ndl/react';

const Component = () => {
  const title = 'Banner title';
  return (
    <Banner
      isCloseable={true}
      onClose={() => alert('Banner component close icon clicked')}
    >
      <Banner.Header>{title}</Banner.Header>
      <Banner.Description>Banner description</Banner.Description>
    </Banner>
  );
};

export default Component;
```

### Global

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Banner } from '@neo4j-ndl/react';

const Component = () => {
  const title = 'Banner title';
  return (
    <Banner usage="global">
      <Banner.Header>{title}</Banner.Header>
      <Banner.Description>Banner description</Banner.Description>
    </Banner>
  );
};

export default Component;
```

### Variants

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Banner } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div className="n-flex n-flex-col n-gap-token-8">
      <Banner variant="info">
        <Banner.Header>Info</Banner.Header>
        <Banner.Description>This is a banner of type info.</Banner.Description>
      </Banner>
      <Banner variant="success">
        <Banner.Header>Success</Banner.Header>
        <Banner.Description>
          This is a banner of type success.
        </Banner.Description>
      </Banner>
      <Banner variant="warning">
        <Banner.Header>Warning</Banner.Header>
        <Banner.Description>
          This is a banner of type warning.
        </Banner.Description>
      </Banner>
      <Banner variant="danger">
        <Banner.Header>Danger</Banner.Header>
        <Banner.Description>
          This is a banner of type danger.
        </Banner.Description>
      </Banner>
      <Banner variant="neutral">
        <Banner.Header>Neutral</Banner.Header>
        <Banner.Description>
          This is a banner of type neutral.
        </Banner.Description>
      </Banner>
    </div>
  );
};

export default Component;
```

### With Actions

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Banner, OutlinedButton, TextButton } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Banner hasIcon={true}>
      <Banner.Header>Banner title</Banner.Header>
      <Banner.Description>Banner description</Banner.Description>
      <Banner.Actions>
        <OutlinedButton>Primary action</OutlinedButton>
        <TextButton>Secondary action</TextButton>
      </Banner.Actions>
    </Banner>
  );
};

export default Component;
```

### With Icons

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Banner } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div className="n-flex n-flex-col n-gap-token-8">
      <Banner variant="info" hasIcon={true}>
        <Banner.Header>Info</Banner.Header>
        <Banner.Description>This is a banner of type info.</Banner.Description>
      </Banner>
      <Banner variant="success" hasIcon={true}>
        <Banner.Header>Success</Banner.Header>
        <Banner.Description>
          This is a banner of type success.
        </Banner.Description>
      </Banner>
      <Banner variant="warning" hasIcon={true}>
        <Banner.Header>Warning</Banner.Header>
        <Banner.Description>
          This is a banner of type warning.
        </Banner.Description>
      </Banner>
      <Banner variant="danger" hasIcon={true}>
        <Banner.Header>Danger</Banner.Header>
        <Banner.Description>
          This is a banner of type danger.
        </Banner.Description>
      </Banner>
      <Banner variant="neutral" hasIcon={true}>
        <Banner.Header>Neutral</Banner.Header>
        <Banner.Description>
          This is a banner of type neutral.
        </Banner.Description>
      </Banner>
    </div>
  );
};

export default Component;
```

### Without Title

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Banner, OutlinedButton } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Banner>
      <Banner.Description>A banner with only description</Banner.Description>
      <Banner.Actions>
        <OutlinedButton>Action</OutlinedButton>
      </Banner.Actions>
    </Banner>
  );
};

export default Component;
```