# Banner

Shows a full-width message about the system or page.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Banner.tsx)

## Overview

A banner is a full-width strip for a system or page-wide message.

Use it for messages about the whole product or page. Use `Callout` for a note tied to nearby content.

## Examples

### Basic

```tsx
import { Banner } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Banner>
      <Banner.Content>Tempo mainnet is live.</Banner.Content>
      <Banner.Action>Read more</Banner.Action>
      <Banner.Dismiss />
    </Banner>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Banner/Basic.tsx)

### Intent

Set `intent` to `neutral`, `info`, `positive`, `warning`, or `negative`. It defaults to `neutral`.

```tsx
import { Banner, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.stack()}>
      {(['neutral', 'info', 'positive', 'warning', 'negative'] as const).map((intent) => (
        <Banner intent={intent} key={intent}>
          <Banner.Content>Tempo mainnet is live.</Banner.Content>
          <Banner.Action>Read more</Banner.Action>
          <Banner.Dismiss />
        </Banner>
      ))}
    </div>
  )
}

namespace styles {
  export const stack = style({ display: 'flex', flexDirection: 'column', gap: '2' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Banner/Intent.tsx)

## Guidelines

TODO: Write guidelines for Banner.