Alert

Installation

npx usmds add alert

Usage

import { Alert } from '@components/Alert';
 
// Basic usage
<Alert
  variant="info"
  title="Alert message"
  description={{
    body: 'Basic alert message'
  }}
/>
 
// With link
<Alert
  variant="info"
  title="Alert message"
  description={{
    body: 'Additional context and followup information including ',
    link: 'a link'
  }}
/>

Props

Alert

Extends View props.

Prop	Type	Default	Description
variant	`'info' \| 'error' \| 'warning' \| 'success' \| 'emergency'`	`'info'`	Determines the color scheme and style of the alert.
alertStyle	`'default' \| 'no-header' \| 'list' \| 'slim' \| 'no-icon'`	`'default'`	Controls the layout and appearance of the alert.
title	`string`	-	The main heading text of the alert.
description	`AlertDescription`	-	Content configuration for the alert body.
showIcon	`boolean`	`true`	Controls the visibility of the alert icon.
className	`string`	-	Additional CSS classes to apply to the alert.

AlertDescription

Property	Type	Description
title	`string`	Optional title text for no-header and slim variants.
body	`string`	Main content text of the alert.
link	`string`	Optional link text to be displayed.
messages	`Array<AlertMessage>`	Array of messages for list-style alerts.

AlertMessage

Property	Type	Description
text	`string`	The main text content of the message.
link	`string`	Optional link text within the message.
suffix	`string`	Optional text to appear after the link.

Variants

Info Alert

<Alert variant='info' title='Info alert' description={{ body: 'This is an informational alert.' }} />

Error Alert

<Alert variant='error' title='Error alert' description={{ body: 'This is an error alert.' }} />

Warning Alert

<Alert variant='warning' title='Warning alert' description={{ body: 'This is a warning alert.' }} />

Success Alert

<Alert variant='success' title='Success alert' description={{ body: 'This is a success alert.' }} />

Emergency Alert

<Alert variant='emergency' title='Emergency alert' description={{ body: 'This is an emergency alert.' }} />

Alert Styles

Default

<Alert
  variant='info'
  alertStyle='default'
  title='Default alert'
  description={{
    body: 'Standard alert with icon and header.'
  }}
/>

No Header

<Alert
  variant='info'
  alertStyle='no-header'
  description={{
    title: 'Compact message',
    body: 'Alert without separate header section.'
  }}
/>

List

<Alert
  variant='info'
  alertStyle='list'
  title='List alert'
  description={{
    messages: [
      {
        text: 'First message with ',
        link: 'a link',
        suffix: ' and more text.'
      },
      {
        text: 'Second message item.'
      }
    ]
  }}
/>

Slim

<Alert
  variant='info'
  alertStyle='slim'
  description={{
    title: 'Slim alert',
    body: 'Compact version with smaller icon.'
  }}
/>

No Icon

<Alert
  variant='info'
  alertStyle='no-icon'
  description={{
    title: 'No icon alert',
    body: 'Alert without an icon.'
  }}
/>

Alert

On this page