---
title: Alert (React) - USWDS + Tailwind
description: Use alerts to communicate important or time-sensitive information.
  Compare standard, slim, and icon-free message styles.
---

# Alert

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

## Examples

### Default

```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

```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

```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

```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.