Alert

A contextual notification that informs users of a status change or action they need to take. Follows USWDS alert patterns.

Props

Prop	Default	Description
`type`	`info`	Alert type: `info`, `warning`, `success`, `error`, or `emergency`
`heading`		Optional heading text displayed above the body content
`role`		ARIA role override; automatically set to `alert` for `error` and `emergency` types
`extra_classes`		Additional CSS classes (e.g., `usa-alert--slim`, `usa-alert--no-icon`)

Slots

Slot	Description
(default)	Alert body content; supports safe HTML including links

Example Usage

Informational Alert

<c-alert type="info" heading="Informative status">
    Lorem ipsum dolor sit amet, <a class="usa-link" href="#">consectetur adipiscing</a> elit.
</c-alert>

Warning Alert

<c-alert type="warning" heading="Warning status">
    Lorem ipsum dolor sit amet, <a class="usa-link" href="#">consectetur adipiscing</a> elit.
</c-alert>

Success Alert

<c-alert type="success" heading="Success status">
    Lorem ipsum dolor sit amet, <a class="usa-link" href="#">consectetur adipiscing</a> elit.
</c-alert>

Error Alert

<c-alert type="error" heading="Error status">
    Lorem ipsum dolor sit amet, <a class="usa-link" href="#">consectetur adipiscing</a> elit.
</c-alert>

Emergency Alert

<c-alert type="emergency" heading="Emergency status">
    Lorem ipsum dolor sit amet, <a class="usa-link" href="#">consectetur adipiscing</a> elit.
</c-alert>

Slim Alert

<c-alert type="info" extra_classes="usa-alert--slim">
    Lorem ipsum dolor sit amet, <a class="usa-link" href="#">consectetur adipiscing</a> elit.
</c-alert>

Alert with No Icon

<c-alert type="info" extra_classes="usa-alert--no-icon">
    No icon alert example.
</c-alert>

Usage Notes

The error and emergency types automatically set role="alert" for screen readers
Use the slim variant (extra_classes="usa-alert--slim") for compact notifications that don't need a heading
Body content is passed as the slot and supports safe HTML rendering
For sitewide alerts that wrap the full page width, use the c-site_alert component instead

{% load cotton %}

<div class="component-variants">
    <h1>Alert Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>
        
        {% cotton alert type="{{ variant.type }}" heading="{{ variant.heading }}" role="{{ variant.role }}" extra_classes="{{ variant.extra_classes }}" %}
            {{ variant.content|safe }}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: Alert
context:
  variants:
    - title: "Informative status"
      type: "info"
      heading: "Informative status"
      role: ""
      extra_classes: ""
      content: 'Lorem ipsum dolor sit amet, <a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.'
    
    - title: "Warning status"
      type: "warning"
      heading: "Warning status"
      role: ""
      extra_classes: ""
      content: 'Lorem ipsum dolor sit amet, <a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.'
    
    - title: "Success status"
      type: "success"
      heading: "Success status"
      role: ""
      extra_classes: ""
      content: 'Lorem ipsum dolor sit amet, <a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.'
    
    - title: "Error status"
      type: "error"
      heading: "Error status"
      role: "alert"
      extra_classes: ""
      content: 'Lorem ipsum dolor sit amet, <a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.'
    
    - title: "Emergency status"
      type: "emergency"
      heading: "Emergency status"
      role: ""
      extra_classes: ""
      content: 'Lorem ipsum dolor sit amet, <a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.'
    
    - title: "Slim alert"
      type: "info"
      heading: ""
      role: ""
      extra_classes: "usa-alert--slim"
      content: 'Lorem ipsum dolor sit amet, <a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.'
    
    - title: "Alert with no icon"
      type: "info"
      heading: ""
      role: ""
      extra_classes: "usa-alert--no-icon"
      content: 'No icon example'