Alert

Use alerts to communicate important or time-sensitive information. Compare standard, slim, and icon-free message styles.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Info status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Warning status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Success status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Error status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Emergency alert message

Additional context and followup information including a link.

alert-demo.tsx

import { Alert } from '@uswds-tailwind/react/alert'
import { Link } from '@uswds-tailwind/react/link'

export default function AlertDemo() {
  return (
    <div className="space-y-4">
      <Alert.Root variant="info" role="status">
        <Alert.Content>
          <Alert.Indicator />
          <Alert.Title>Info status</Alert.Title>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="warning" role="status">
        <Alert.Content>
          <Alert.Indicator />
          <Alert.Title>Warning status</Alert.Title>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="success" role="status">
        <Alert.Content>
          <Alert.Indicator />
          <Alert.Title>Success status</Alert.Title>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="error" role="alert">
        <Alert.Content>
          <Alert.Indicator />
          <Alert.Title>Error status</Alert.Title>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="emergency" role="alert">
        <Alert.Content>
          <Alert.Indicator />
          <Alert.Title>Emergency alert message</Alert.Title>
          <Alert.Description>
            Additional context and followup information including
            {' '}
            <Link href="#" variant="light">a link</Link>
            .
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
    </div>
  )
}

Slim

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

alert-slim-demo.tsx

import { Alert } from '@uswds-tailwind/react/alert'
import { Link } from '@uswds-tailwind/react/link'

export default function AlertSlimDemo() {
  return (
    <div className="space-y-4">
      <Alert.Root variant="info" slim role="status">
        <Alert.Content>
          <Alert.Indicator />
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="warning" slim role="status">
        <Alert.Content>
          <Alert.Indicator />
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="success" slim role="status">
        <Alert.Content>
          <Alert.Indicator />
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="error" slim role="alert">
        <Alert.Content>
          <Alert.Indicator />
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="emergency" slim role="alert">
        <Alert.Content>
          <Alert.Indicator />
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#" variant="light">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
    </div>
  )
}

No Icon

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

alert-no-icon-demo.tsx

import { Alert } from '@uswds-tailwind/react/alert'
import { Link } from '@uswds-tailwind/react/link'

export default function AlertNoIconDemo() {
  return (
    <div className="space-y-4">
      <Alert.Root variant="info" noIcon role="status">
        <Alert.Content>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="warning" noIcon role="status">
        <Alert.Content>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="success" noIcon role="status">
        <Alert.Content>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="error" noIcon role="alert">
        <Alert.Content>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="emergency" noIcon role="alert">
        <Alert.Content>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#" variant="light">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
    </div>
  )
}

Slim No Icon

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

alert-slim-no-icon-demo.tsx

import { Alert } from '@uswds-tailwind/react/alert'
import { Link } from '@uswds-tailwind/react/link'

export default function AlertSlimNoIconDemo() {
  return (
    <div className="space-y-4">
      <Alert.Root variant="info" slim noIcon role="status">
        <Alert.Content>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="warning" slim noIcon role="status">
        <Alert.Content>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="success" slim noIcon role="status">
        <Alert.Content>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="error" slim noIcon role="alert">
        <Alert.Content>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
      <Alert.Root variant="emergency" slim noIcon role="alert">
        <Alert.Content>
          <Alert.Description>
            Lorem ipsum dolor sit amet,
            {' '}
            <Link href="#" variant="light">consectetur adipiscing</Link>
            {' '}
            elit, sed do eiusmod.
          </Alert.Description>
        </Alert.Content>
      </Alert.Root>
    </div>
  )
}

Component API

Compose an alert from Root, Content, and the optional title, description, and indicator parts.

Root`<div>`

Sets the alert color and layout for its children.

Prop	Type	Default	Description
`variant`	`info \| warning \| success \| error \| emergency`	`info`	Selects the visual treatment.
`slim`	`boolean`	`false`	Uses compact spacing.
`noIcon`	`boolean`	`false`	Hides the indicator icon and reduces leading spacing.

Content`<div>`

Groups the alert message.

Title`<div>`

Put a heading element inside when the alert introduces a section.

Description`<div>`

Add supporting detail below Title.

Indicator`<div>`

Displays the variant icon by default; children replace the icon.

Accessibility

Give the alert meaningful text. Choose a live region or alert role when the message is added dynamically and needs announcement.

Alert

Examples

Default

Slim

No Icon

Slim No Icon

Component API

Root<div>

Content<div>

Title<div>

Description<div>

Indicator<div>

Accessibility

Root`<div>`

Content`<div>`

Title`<div>`

Description`<div>`

Indicator`<div>`