Skip to main content
USWDS + Tailwind

Banner

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

Examples

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

An official website of the United States government

banner-demo.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.

PropTypeDescription
defaultOpenbooleanInitially expands uncontrolled content.
openbooleanControls the expanded state.
onOpenChange({ open: boolean }) => voidReceives requested state changes.
AttributeValuePurpose
data-stateopen | closedStyle 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.

AttributeValuePurpose
data-stateopen | closedStyle 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.

AttributeValuePurpose
data-stateopen | closedStyle 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.