---
title: Banner (React) - USWDS + Tailwind
description: Add a government banner so visitors can identify an official U.S.
  government website and check its security information.
---

# Banner

Add a government banner so visitors can identify an official U.S. government website and check its security information.

## Examples

```tsx
import { Banner } from '@uswds-tailwind/react'

export default function BannerDemo() {
  return (
    <Banner.Root>
      <Banner.Header>
        <Banner.Flag />
        <Banner.HeaderText>
          <p>An official website of the United States government</p>
          <Banner.Trigger>
            Here’s how you know
            <Banner.Indicator />
          </Banner.Trigger>
        </Banner.HeaderText>
        <Banner.CloseButton />
      </Banner.Header>
      <Banner.Content>
        <Banner.Guidance>
          <Banner.GuidanceIcon className="border-blue-50 text-blue-50">
            <span className="icon-[material-symbols--account-balance] size-5" />
          </Banner.GuidanceIcon>
          <Banner.GuidanceContent>
            <Banner.GuidanceTitle>Official websites use .gov</Banner.GuidanceTitle>
            <Banner.GuidanceBody>
              A <strong>.gov</strong> website belongs to an official government organization in the United States.
            </Banner.GuidanceBody>
          </Banner.GuidanceContent>
        </Banner.Guidance>
        <Banner.Guidance>
          <Banner.GuidanceIcon className="border-green-40v text-green-40v">
            <span className="icon-[material-symbols--lock] size-5" />
          </Banner.GuidanceIcon>
          <Banner.GuidanceContent>
            <Banner.GuidanceTitle>Secure .gov websites use HTTPS</Banner.GuidanceTitle>
            <Banner.GuidanceBody>
              A <strong>lock</strong> (<span className="icon-[material-symbols--lock] size-4 align-middle" />) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
            </Banner.GuidanceBody>
          </Banner.GuidanceContent>
        </Banner.Guidance>
      </Banner.Content>
    </Banner.Root>
  )
}
```

## Component API

Place Header and collapsible Content inside Root. Trigger controls the content panel.

### Root `<section>`

Owns the expanded state.

| Prop | Type | Description |
| - | - | - |
| `defaultOpen` | `boolean` | Initially expands uncontrolled content. |
| `open` | `boolean` | Controls the expanded state. |
| `onOpenChange` | `({ open: boolean }) => void` | Receives requested state changes. |

| Attribute | Value | Purpose |
| - | - | - |
| `data-state` | `open \| closed` | Style the open and closed states. |

### Header `<header>`

Put Flag and HeaderText beside Trigger.

### Flag `<div>`

Displays the U.S. flag graphic by default; children replace it.

### HeaderText `<div>`

Place the banner message beside Flag.

### Trigger `<button>`

Toggles the guidance panel.

| Attribute | Value | Purpose |
| - | - | - |
| `data-state` | `open \| closed` | Style the open and closed states. |

### Indicator `<div>`

Shows the expansion indicator; children can replace it.

### CloseButton `<div>`

Displays a decorative close icon in the expanded header.

### Content `<div>`

Place Guidance parts in the collapsible panel.

| Attribute | Value | Purpose |
| - | - | - |
| `data-state` | `open \| closed` | Style the open and closed states. |

### Guidance `<div>`

Use one per guidance message.

### GuidanceIcon `<div>`

Place the icon beside GuidanceContent.

### GuidanceContent `<div>`

Group GuidanceTitle and GuidanceBody here.

### GuidanceTitle `<div>`

Use a short title for each guidance message.

### GuidanceBody `<div>`

Add supporting details for the guidance title.