Alert

Alert messages provide contextual feedback for user actions.

Examples

Bubble

Bubble alerts are designed for displaying inline messages and notifications within forms, panels, cards, and other content areas. They are Chi's default Alert type.

Default

This is a base alert

This is a success alert

This is a danger alert

This is a warning alert

This is an info alert

This is a muted alert

Web Component
HTML Blueprint

To render an alert use the tag chi-alert. Use the color attribute to define a semantic color that corresponds to the meaning or value state of your alert. Supported colors include success, danger, warning, info, and muted. If no color is defined, alerts will default to the base style which uses the body text color. This is useful for displaying neutral alerts with no specific value state.

<!-- Base - No semantic color defined -->
<chi-alert icon="flag">
  This is a base alert
</chi-alert>
<!-- Success -->
<chi-alert color="success" icon="circle-check">
  This is a success alert
</chi-alert>
<!-- Danger -->
<chi-alert color="danger" icon="circle-x">
  This is a danger alert
</chi-alert>
<!-- Warning -->
<chi-alert color="warning" icon="warning">
  This is a warning alert
</chi-alert>
<!-- Info -->
<chi-alert color="info" icon="circle-info">
  This is an info alert
</chi-alert>
<!-- Muted -->
<chi-alert color="muted" icon="circle-info">
  This is a muted alert
</chi-alert>

To render an alert, use the class chi-alert. Apply a semantic color class that corresponds to the meaning or value state of your alert. Supported classes include -success, -danger, -warning, -info, and -muted. If no class is defined, alerts will default to the base style which uses the body text color. This is useful for displaying neutral alerts with no specific value state.

<!-- Base - No semantic color class defined -->
<div class="chi-alert" role="alert">
  <i class="chi-alert__icon chi-icon icon-flag" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a base alert</p>
  </div>
</div>
<!-- Success -->
<div class="chi-alert -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Danger -->
<div class="chi-alert -danger" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-x" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a danger alert</p>
  </div>
</div>
<!-- Warning -->
<div class="chi-alert -warning" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a warning alert</p>
  </div>
</div>
<!-- Info -->
<div class="chi-alert -info" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is an info alert</p>
  </div>
</div>
<!-- Muted -->
<div class="chi-alert -muted" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a muted alert</p>
  </div>
</div>

Centered

Note: Use sparingly. Centered Bubble alerts should only be used to render brief messages on centered forms such as those found on Sign In and Sign Up screens. Centered alerts do not support titles.

This is a centered danger alert

Web Component
HTML Blueprint

Use the attribute center to center the content of a Bubble Alert.

<chi-alert color="danger" icon="circle-x" center>
  This is a centered danger alert
</chi-alert>

Apply the class -center to center the content of a Bubble Alert.

<div class="chi-alert -danger -center" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-x" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a centered danger alert</p>
  </div>
</div>

Titled

The title will automatically get colored based on the alerts semantic color class.

This is a base alert

This is a success alert

This is a danger alert

This is a warning alert

This is an info alert

This is a muted alert

Web Component
HTML Blueprint

Use the title="" attribute to display a title above the alert text.

<!-- Base - No semantic color defined -->
<chi-alert icon="flag" title="Base">
  This is a base alert
</chi-alert>
<!-- Success -->
<chi-alert color="success" icon="circle-check" title="Success">
  This is a success alert
</chi-alert>
<!-- Danger -->
<chi-alert color="danger" icon="circle-x" title="Danger">
  This is a danger alert
</chi-alert>
<!-- Warning -->
<chi-alert color="warning" icon="warning" title="Warning">
  This is a warning alert
</chi-alert>
<!-- Info -->
<chi-alert color="info" icon="circle-info" title="Info">
  This is an info alert
</chi-alert>
<!-- Muted -->
<chi-alert color="muted" icon="circle-info" title="Muted">
  This is a muted alert
</chi-alert>

Use chi-alert__title to add a title to an Alert. To override the title color, apply a text color utility class.

<!-- Base - No semantic color class defined -->
<div class="chi-alert" role="alert">
  <i class="chi-alert__icon chi-icon icon-flag" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Base</p>
    <p class="chi-alert__text">This is a base alert</p>
  </div>
</div>
<!-- Success -->
<div class="chi-alert -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Danger -->
<div class="chi-alert -danger" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-x" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Danger</p>
    <p class="chi-alert__text">This is a danger alert</p>
  </div>
</div>
<!-- Warning -->
<div class="chi-alert -warning" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Warning</p>
    <p class="chi-alert__text">This is a warning alert</p>
  </div>
</div>
<!-- Info -->
<div class="chi-alert -info" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Info</p>
    <p class="chi-alert__text">This is an info alert</p>
  </div>
</div>
<!-- Muted -->
<div class="chi-alert -muted" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Muted</p>
    <p class="chi-alert__text">This is a muted alert</p>
  </div>
</div>

Spinner

Use the spinner attribute to let users know when information is saving or loading.

This is a base alert

This is a success alert

This is a danger alert

This is a warning alert

This is an info alert

This is a muted alert

Web Component
HTML Blueprint

Use the spinner attribute to display spinner icon.

<!-- Base - No semantic color defined -->
<chi-alert spinner>
  This is a base alert
</chi-alert>
<!-- Success -->
<chi-alert color="success" spinner>
  This is a success alert
</chi-alert>
<!-- Danger -->
<chi-alert color="danger" spinner>
  This is a danger alert
</chi-alert>
<!-- Warning -->
<chi-alert color="warning" spinner>
  This is a warning alert
</chi-alert>
<!-- Info -->
<chi-alert color="info" spinner>
  This is an info alert
</chi-alert>
<!-- Muted -->
<chi-alert color="muted" spinner>
  This is a muted alert
</chi-alert>

<!-- Base - No semantic color class defined -->
<div class="chi-alert" role="alert">
  <div class="chi-alert__spinner">
    <svg class="chi-spinner" viewBox="0 0 66 66">
      <title>Loading</title>
      <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
    </svg>
  </div>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Base</p>
    <p class="chi-alert__text">This is a base alert</p>
  </div>
</div>
<!-- Success -->
<div class="chi-alert -success" role="alert">
  <div class="chi-alert__spinner">
    <svg class="chi-spinner" viewBox="0 0 66 66">
      <title>Loading</title>
      <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
    </svg>
  </div>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Danger -->
<div class="chi-alert -danger" role="alert">
  <div class="chi-alert__spinner">
    <svg class="chi-spinner" viewBox="0 0 66 66">
      <title>Loading</title>
      <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
    </svg>
  </div>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Danger</p>
    <p class="chi-alert__text">This is a danger alert</p>
  </div>
</div>
<!-- Warning -->
<div class="chi-alert -warning" role="alert">
  <div class="chi-alert__spinner">
    <svg class="chi-spinner" viewBox="0 0 66 66">
      <title>Loading</title>
      <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
    </svg>
  </div>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Warning</p>
    <p class="chi-alert__text">This is a warning alert</p>
  </div>
</div>
<!-- Info -->
<div class="chi-alert -info" role="alert">
  <div class="chi-alert__spinner">
    <svg class="chi-spinner" viewBox="0 0 66 66">
      <title>Loading</title>
      <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
    </svg>
  </div>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Info</p>
    <p class="chi-alert__text">This is an info alert</p>
  </div>
</div>
<!-- Muted -->
<div class="chi-alert -muted" role="alert">
  <div class="chi-alert__spinner">
    <svg class="chi-spinner" viewBox="0 0 66 66">
      <title>Loading</title>
      <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
    </svg>
  </div>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Muted</p>
    <p class="chi-alert__text">This is a muted alert</p>
  </div>
</div>

Sizes

This is a small success alert

md (default)

This is a success alert

This is a large success alert

Web Component
HTML Blueprint

Use the size="" attribute to customize the size of an alert. Supported sizes are sm, md, and lg.

<!-- Small -->
<chi-alert color="success" icon="circle-check" size="sm">
  This is a small success alert
</chi-alert>
<!-- Small Titled -->
<chi-alert color="success" icon="circle-check" size="sm" title="Success">
  This is a small success alert
</chi-alert>
<!-- Medium -->
<chi-alert color="success" icon="circle-check">
  This is a success alert
</chi-alert>
<!-- Medium Titled -->
<chi-alert color="success" icon="circle-check" title="Success">
  This is a success alert
</chi-alert>
<!-- Large -->
<chi-alert color="success" icon="circle-check" size="lg">
  This is a large success alert
</chi-alert>
<!-- Large Titled -->
<chi-alert color="success" icon="circle-check" size="lg" title="Success">
  This is a large success alert
</chi-alert>

Use size classes to customize the size of an alert. Supported size classes are -sm, -md, and -lg.

<!-- Small -->
<div class="chi-alert -success -sm" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a small success alert</p>
  </div>
</div>
<!-- Small Titled -->
<div class="chi-alert -success -sm" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a small success alert</p>
  </div>
</div>
<!-- Medium -->
<div class="chi-alert -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Medium Titled -->
<div class="chi-alert -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Large -->
<div class="chi-alert -success -lg" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a large success alert</p>
  </div>
</div>
<!-- Large Titled -->
<div class="chi-alert -success -lg" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a large success alert</p>
  </div>
</div>

Sizes

This is a small success alert

md (default)

This is a success alert

Web Component
HTML Blueprint

Use the size="" attribute to customize the size of an alert. Supported sizes are sm and md.

<!-- Small -->
<chi-alert color="success" icon="circle-check" size="sm">
  This is a small success alert
</chi-alert>
<!-- Small Titled -->
<chi-alert color="success" icon="circle-check" size="sm" title="Success">
  This is a small success alert
</chi-alert>
<!-- Medium -->
<chi-alert color="success" icon="circle-check">
  This is a success alert
</chi-alert>
<!-- Medium Titled -->
<chi-alert color="success" icon="circle-check" title="Success">
  This is a success alert
</chi-alert>

Use size classes to customize the size of an alert. Supported size classes are -sm and -md.

<!-- Small -->
<div class="chi-alert -success -sm" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a small success alert</p>
  </div>
</div>
<!-- Small Titled -->
<div class="chi-alert -success -sm" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a small success alert</p>
  </div>
</div>
<!-- Medium -->
<div class="chi-alert -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Medium Titled -->
<div class="chi-alert -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a success alert</p>
  </div>
</div>

Closable

To allow users to dismiss an alert.

This is a closable warning alert

This is a large closable warning alert

Web Component
HTML Blueprint

Use attribute closable to render a close button that allows users to dismiss an alert.
Use attribute mutable to remove alert once close buttons is clicked.

<!-- closable -->
<chi-alert color="warning" icon="warning" closable>
  This is a closable warning alert
</chi-alert>
<!-- closable Titled -->
<chi-alert color="warning" icon="warning" title="Warning" closable>
  This is a closable warning alert
</chi-alert>
<!-- Large closable Titled -->
<chi-alert color="warning" icon="warning" size="lg" title="Warning" closable>
  This is a large closable warning alert
</chi-alert>

Use the class -close and insert a close button chi-alert__close-button.

<!-- Closable -->
<div class="chi-alert -warning -close" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a closable warning alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- closable Titled -->
<div class="chi-alert -warning -close" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Warning</p>
    <p class="chi-alert__text">This is a closable warning alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Large closable Titled -->
<div class="chi-alert -warning -close -lg" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Warning</p>
    <p class="chi-alert__text">This is a large closable warning alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>

Closable

To allow users to dismiss an alert.

This is a closable warning alert

Web Component
HTML Blueprint

Use attribute closable to render a close button that allows users to dismiss an alert.
Use attribute mutable to remove alert once close buttons is clicked.

<!-- closable -->
<chi-alert color="warning" icon="warning" closable>
  This is a closable warning alert
</chi-alert>
<!-- closable Titled -->
<chi-alert color="warning" icon="warning" title="Warning" closable>
  This is a closable warning alert
</chi-alert>

Use the class -close and insert a close button chi-alert__close-button.

<!-- Closable -->
<div class="chi-alert -warning -close" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a closable warning alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- closable Titled -->
<div class="chi-alert -warning -close" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Warning</p>
    <p class="chi-alert__text">This is a closable warning alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>

Closable alert interaction

Click me to show the alert

This is a closable warning alert

Web Component
HTML Blueprint

<!-- Trigger -->
<chi-button id="alert-trigger-button" color="primary">Click me to show the alert</chi-button>

<!-- Alert -->
<chi-alert id="interactive-alert" icon="warning" closable mutable>
  This is a closable warning alert
</chi-alert>

<!-- Javascript -->
<script>
  const interactiveAlertTrigger = document.getElementById('alert-trigger-button');

  interactiveAlertTrigger.addEventListener('chiClick', () => {
    <!-- Include your custom logic here to launch the alert -->
  })
</script>

This HTML Blueprint requires additional JavaScript.

<!-- Trigger -->
<button class="chi-button -primary" id="alert-trigger-button">Click me to show the alert</button>

<!-- Alert -->
<div class="chi-alert" role="alert" id="interactive-alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
      <p class="chi-alert__text">This is a closable warning alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
      <div class="chi-button__content">
          <i class="chi-icon icon-x" aria-hidden="true"></i>
      </div>
  </button>
</div>

<!-- Javascript -->
<script>
  const interactiveAlertTrigger = document.getElementById('alert-trigger-button');

  interactiveAlertTrigger.addEventListener('click', () => {
    <!-- Include your custom logic here to launch the alert -->
  })
</script>

Clickable

Make an Alert clickable by placing it inside a link or button component.

Complete platform setup

Configure your first device

Web Component
HTML Blueprint

<!-- Clickable alert using chi-link -->
<chi-link href="#" class="-d--block" no-hover-underline>
  <chi-alert color="info" icon="file" class="-w--100">
    <span class="-text--primary -text--semi-bold -flex--grow1">Complete platform setup</span>
    <chi-icon icon="chevron-right" slot="chi-alert__clickable-icon"></chi-icon>
  </chi-alert>
</chi-link>

<!-- Clickable alert using chi-button -->
<chi-button variant="flat" extra-class="-b--0 -p--0 -text--no-transform -no-hover" fluid>
  <chi-alert color="info" icon="settings" class="-w--100">
    <span class="-text--primary -text--semi-bold -flex--grow1">Configure your first device</span>
    <chi-icon icon="chevron-right" slot="chi-alert__clickable-icon"></chi-icon>
  </chi-alert>
</chi-button>

<!-- Clickable alert using chi-link -->
<a href="#" class="chi-link -no-hover-underline">
  <div class="chi-alert -info" role="alert">
    <i class="chi-alert__icon chi-icon icon-file" aria-hidden="true"></i>
    <div class="chi-alert__content">
      <p class="chi-alert__text -text--primary -text--semi-bold">Complete platform setup</p>
    </div>
    <div class="chi-alert__clickable-icon">
      <i class="chi-icon icon-chevron-right"></i>
    </div>
  </div>
</a>

<!-- Clickable alert using chi-button -->
<button class="chi-button -flat -fluid -b--0 -p--0 -text--no-transform -no-hover">
  <div class="chi-button__content">
    <div class="chi-alert -info -w--100" role="alert">
      <i class="chi-alert__icon chi-icon icon-settings -icon--info" aria-hidden="true"></i>
      <div class="chi-alert__content">
        <p class="chi-alert__text -text--primary -text--semi-bold">Configure your first device</p>
      </div>
      <div class="chi-alert__clickable-icon">
        <i class="chi-icon icon-chevron-right"></i>
      </div>
    </div>
  </div>
</button>

Clickable

Make an Alert clickable by placing it inside a link or button component.

Web Component
HTML Blueprint

<!-- Clickable alert using chi-link -->
<chi-link href="#" class="-d--block" no-hover-underline>
  <chi-alert color="info" icon="file" title="Complete platform setup" class="-w--100">
    <chi-icon icon="chevron-right" slot="chi-alert__clickable-icon"></chi-icon>
  </chi-alert>
</chi-link>

<!-- Clickable alert using chi-button -->
<chi-button variant="flat" extra-class="-b--0 -p--0 -text--no-transform -no-hover" fluid>
  <chi-alert color="info" icon="settings" title="Configure your first device" class="-w--100">
    <chi-icon icon="chevron-right" slot="chi-alert__clickable-icon"></chi-icon>
  </chi-alert>
</chi-button>

<!-- Clickable alert using chi-link -->
<a href="#" class="chi-link -no-hover-underline">
  <div class="chi-alert -info" role="alert">
    <i class="chi-alert__icon chi-icon icon-flag" aria-hidden="true"></i>
    <div class="chi-alert__content">
      <p class="chi-alert__title">Complete platform setup</p>
    </div>
    <div class="chi-alert__clickable-icon">
      <i class="chi-icon icon-chevron-right"></i>
    </div>
  </div>
</a>

<!-- Clickable alert using chi-button -->
<button class="chi-button -flat -fluid -b--0 -p--0 -text--no-transform -no-hover">
  <div class="chi-button__content">
    <div class="chi-alert -info -w--100" role="alert">
      <i class="chi-alert__icon chi-icon icon-settings -icon--info" aria-hidden="true"></i>
      <div class="chi-alert__content">
        <p class="chi-alert__title">Configure your first device</p>
      </div>
      <div class="chi-alert__clickable-icon">
        <i class="chi-icon icon-chevron-right"></i>
      </div>
    </div>
  </div>
</button>

Actions

This is a large closable success alertAction

Web Component
HTML Blueprint

Add buttons to an alert by defining slot="chi-alert__actions" on each chi-button.

<chi-alert color="success" icon="circle-check" size="lg" title="Success" closable>
  This is a large closable success alert
  <chi-button slot="chi-alert__actions" color="primary">Action</chi-button>
</chi-alert>

While chi-alert__actions can be added to any Alert, alert actions are best suited for default or Titled alerts with the size class -lg.
Large Alerts have extra chi-alert padding, a larger chi-alert__icon, and a larger chi-alert__close-button.

<div class="chi-alert -success -lg" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a large closable success alert</p>
    <div class="chi-alert__actions">
      <button class="chi-button -primary">Action</button>
    </div>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>

Actions

This is a large closable success alertAction

Web Component
HTML Blueprint

Add buttons to an alert by defining slot="chi-alert__actions" on each chi-button.

<chi-alert color="success" icon="circle-check" size="lg" title="Success" closable>
  This is a large closable success alert
  <chi-button slot="chi-alert__actions" size="xs">Action</chi-button>
</chi-alert>

<div class="chi-alert -success -lg" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a large closable success alert</p>
    <div class="chi-alert__actions">
      <button class="chi-button -xs">Action</button>
    </div>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>

Banner

Banner alerts are commonly presented above or below the Header component and are used for scenarios such as reminding new users to confirm their email address or notifying users when they are experiencing connectivity issues.

Default

This is a base alert

This is a success alert

This is a danger alert

This is a warning alert

This is an info alert

This is a muted alert

<!-- Base - No semantic color defined -->
<chi-alert type="banner" icon="flag">
  This is a base alert
</chi-alert>
<!-- Success -->
<chi-alert type="banner" icon="circle-check" color="success">
  This is a success alert
</chi-alert>
<!-- Danger -->
<chi-alert type="banner" icon="circle-x" color="danger">
  This is a danger alert
</chi-alert>
<!-- Warning -->
<chi-alert type="banner" icon="warning" color="warning">
  This is a warning alert
</chi-alert>
<!-- Info -->
<chi-alert type="banner" icon="circle-info" color="info">
  This is an info alert
</chi-alert>
<!-- Muted -->
<chi-alert type="banner" icon="circle-info" color="muted">
  This is a muted alert
</chi-alert>

<!-- Base - No semantic color class defined -->
<div class="chi-alert -banner" role="alert">
  <i class="chi-alert__icon chi-icon icon-flag" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a base alert</p>
  </div>
</div>
<!-- Success -->
<div class="chi-alert -banner -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Danger -->
<div class="chi-alert -banner -danger" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-x" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a danger alert</p>
  </div>
</div>
<!-- Warning -->
<div class="chi-alert -banner -warning" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a warning alert</p>
  </div>
</div>
<!-- Info -->
<div class="chi-alert -banner -info" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is an info alert</p>
  </div>
</div>
<!-- Muted -->
<div class="chi-alert -banner -muted" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a muted alert</p>
  </div>
</div>

Centered

Note: Use sparingly. Centered Banner alerts should only be used to render brief messages. Centered alerts do not support titles.

This is a centered danger alert

Use the attribute center to center the content of a Banner Alert.

<chi-alert type="banner" icon="circle-x" color="danger" center>
  This is a centered danger alert
</chi-alert>

Apply the class -center to center the content of a Banner Alert.

<div class="chi-alert -banner -danger -center" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-x" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a centered danger alert</p>
  </div>
</div>

Titled

The title will automatically get colored based on the alerts semantic color class. To override the title color, apply a text color utility class.

This is a base alert

This is a success alert

This is a danger alert

This is a warning alert

This is an info alert

This is a muted alert

Use title="" attribute to add a title to an Alert.

<!-- Base - No semantic color defined -->
<chi-alert type="banner" icon="flag" title="Base">
  This is a base alert
</chi-alert>
<!-- Success -->
<chi-alert type="banner" icon="circle-check" color="success" title="Success">
  This is a success alert
</chi-alert>
<!-- Danger -->
<chi-alert type="banner" icon="circle-x" color="danger" title="Danger">
  This is a danger alert
</chi-alert>
<!-- Warning -->
<chi-alert type="banner" icon="warning" color="warning" title="Warning">
  This is a warning alert
</chi-alert>
<!-- Info -->
<chi-alert type="banner" icon="circle-info" color="info" title="Info">
  This is an info alert
</chi-alert>
<!-- Muted -->
<chi-alert type="banner" icon="circle-info" color="muted" title="Muted">
  This is a muted alert
</chi-alert>

Use chi-alert__title class to add a title to an Alert.

<!-- Base - No semantic color class defined -->
<div class="chi-alert -banner" role="alert">
  <i class="chi-alert__icon chi-icon icon-flag" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Base</p>
    <p class="chi-alert__text">This is a base alert</p>
  </div>
</div>
<!-- Success -->
<div class="chi-alert -banner -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Danger -->
<div class="chi-alert -banner -danger" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-x" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Danger</p>
    <p class="chi-alert__text">This is a danger alert</p>
  </div>
</div>
<!-- Warning -->
<div class="chi-alert -banner -warning" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Warning</p>
    <p class="chi-alert__text">This is a warning alert</p>
  </div>
</div>
<!-- Info -->
<div class="chi-alert -banner -info" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Info</p>
    <p class="chi-alert__text">This is an info alert</p>
  </div>
</div>
<!-- Muted -->
<div class="chi-alert -banner -muted" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Muted</p>
    <p class="chi-alert__text">This is a muted alert</p>
  </div>
</div>

Sizes

This is a small success alert

md (default)

This is a success alert

This is a large success alert

Use the size="" attribute to customize the size of an alert. Supported sizes are sm, md, and lg.

<!-- Small -->
<chi-alert type="banner" color="success" icon="circle-check" size="sm">
  This is a small success alert
</chi-alert>
<!-- Small Titled -->
<chi-alert type="banner" color="success" icon="circle-check" size="sm" title="Success">
  This is a small success alert
</chi-alert>
<!-- Medium -->
<chi-alert type="banner" color="success" icon="circle-check">
  This is a success alert
</chi-alert>
<!-- Medium Titled -->
<chi-alert type="banner" color="success" icon="circle-check" title="Success">
  This is a success alert
</chi-alert>
<!-- Large -->
<chi-alert type="banner" color="success" icon="circle-check" size="lg">
  This is a large success alert
</chi-alert>
<!-- Large Titled -->
<chi-alert type="banner" color="success" icon="circle-check" size="lg" title="Success">
  This is a large success alert
</chi-alert>

Use size classes to customize the size of an alert. Supported size classes are -sm, -md, and -lg.

<!-- Small -->
<div class="chi-alert -banner -success -sm" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a small success alert</p>
  </div>
</div>
<!-- Small Titled -->
<div class="chi-alert -banner -success -sm" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a small success alert</p>
  </div>
</div>
<!-- Medium -->
<div class="chi-alert -banner -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Medium Titled -->
<div class="chi-alert -banner -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Large -->
<div class="chi-alert -banner -success -lg" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a large success alert</p>
  </div>
</div>
<!-- Large Titled -->
<div class="chi-alert -banner -success -lg" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a large success alert</p>
  </div>
</div>

Closable

This is a closable warning alert

This is a large closable warning alert

Use the closable attribute to render a close button that allows users to dismiss an alert.

<!-- closable -->
<chi-alert type="banner" color="warning" icon="warning" closable>
  This is a closable warning alert
</chi-alert>
<!-- closable Titled -->
<chi-alert type="banner" color="warning" icon="warning" title="Warning" closable>
  This is a closable warning alert
</chi-alert>
<!-- Large closable Titled -->
<chi-alert type="banner" color="warning" icon="warning" size="lg" title="Warning" closable>
  This is a large closable warning alert
</chi-alert>

To allow users to dismiss an alert, use the class -close and insert a dismiss button chi-alert__close-button.

<!-- Closable Base -->
<div class="chi-alert -banner -warning -close" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a base closable warning alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Closable Titled -->
<div class="chi-alert -banner -warning -close" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Warning</p>
    <p class="chi-alert__text">This is a closable warning alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Large Closable Titled -->
<div class="chi-alert -banner -warning -close -lg" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Warning</p>
    <p class="chi-alert__text">This is a closable warning alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>

Actionable

This is a large closable alertAction

Add buttons to an alert by defining slot="chi-alert__actions" on each chi-button.

<chi-alert type="banner" icon="flag" size="lg" title="Base" closable>
  This is a large closable alert
  <chi-button slot="chi-alert__actions" color="primary">Action</chi-button>
</chi-alert>

<div class="chi-alert -banner -lg" role="alert">
  <i class="chi-alert__icon chi-icon icon-flag" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Base</p>
    <p class="chi-alert__text">This is a large closable alert</p>
    <div class="chi-alert__actions">
      <button class="chi-button -primary">Action</button>
    </div>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>

Toast

Toasts are unobtrusive alerts used to display brief, auto-expiring information.

Default

This is a base alert

This is a success alert

This is a danger alert

This is a warning alert

This is an info alert

This is a muted alert

Web Component
HTML Blueprint

To use a toast alert, set the type attribute to toast.

<!-- Base - No semantic color defined -->
<chi-alert type="toast" icon="flag">
  This is a base alert
</chi-alert>
<!-- Success -->
<chi-alert type="toast" color="success" icon="circle-check">
  This is a success alert
</chi-alert>
<!-- Danger -->
<chi-alert type="toast" color="danger" icon="circle-x">
  This is a danger alert
</chi-alert>
<!-- Warning -->
<chi-alert type="toast" color="warning" icon="warning">
  This is a warning alert
</chi-alert>
<!-- Info -->
<chi-alert type="toast" color="info" icon="circle-info">
  This is an info alert
</chi-alert>
<!-- Muted -->
<chi-alert type="toast" color="muted" icon="circle-info">
  This is a muted alert
</chi-alert>

To use a toast alert, apply the class -toast.

<!-- Base - No semantic color class defined -->
<div class="chi-alert -toast" role="alert">
  <i class="chi-alert__icon chi-icon icon-flag" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a base alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Success -->
<div class="chi-alert -toast -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Danger -->
<div class="chi-alert -toast -danger" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-x" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a danger alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Warning -->
<div class="chi-alert -toast -warning" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a warning alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Info -->
<div class="chi-alert -toast -info" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is an info alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Muted -->
<div class="chi-alert -toast -muted" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a muted alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>

Titled

This is a base alert

This is a success alert

This is a danger alert

This is a warning alert

This is an info alert

This is a muted alert

Web Component
HTML Blueprint

<!-- Base - No semantic color defined -->
<chi-alert type="toast" icon="flag" title="Base">
  This is a base alert
</chi-alert>
<!-- Success -->
<chi-alert type="toast" icon="circle-check" color="success" title="Success">
  This is a success alert
</chi-alert>
<!-- Danger -->
<chi-alert type="toast" color="danger" icon="circle-x" title="Danger">
  This is a danger alert
</chi-alert>
<!-- Warning -->
<chi-alert type="toast" color="warning" icon="warning" title="Warning">
  This is a warning alert
</chi-alert>
<!-- Info -->
<chi-alert type="toast" color="info" icon="circle-info" title="Info">
  This is an info alert
</chi-alert>
<!-- Muted -->
<chi-alert type="toast" color="muted" icon="circle-info" title="Muted">
  This is a muted alert
</chi-alert>

<!-- Base - No semantic color class defined -->
<div class="chi-alert -toast" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Base</p>
    <p class="chi-alert__text">This is a base alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Success -->
<div class="chi-alert -toast -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Danger -->
<div class="chi-alert -toast -danger" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-x" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Danger</p>
    <p class="chi-alert__text">This is a danger alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Warning -->
<div class="chi-alert -toast -warning" role="alert">
  <i class="chi-alert__icon chi-icon icon-warning" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Warning</p>
    <p class="chi-alert__text">This is a warning alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Info -->
<div class="chi-alert -toast -info" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Info</p>
    <p class="chi-alert__text">This is an info alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Muted -->
<div class="chi-alert -toast -muted" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Muted</p>
    <p class="chi-alert__text">This is a muted alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>

Sizes

This is a small success alert

md (default)

This is a success alert

This is a large success alert

Web Component
HTML Blueprint

Use the size="" attribute to customize the size of an alert. Supported sizes are sm, md, and lg.

<!-- Small -->
<chi-alert type="toast" color="success" icon="circle-check" size="sm">
  This is a small success alert
</chi-alert>
<!-- Small Titled -->
<chi-alert type="toast" color="success" icon="circle-check" size="sm" title="Success">
  This is a small success alert
</chi-alert>
<!-- Medium -->
<chi-alert type="toast" color="success" icon="circle-check">
  This is a success alert
</chi-alert>
<!-- Medium Titled -->
<chi-alert type="toast" color="success" icon="circle-check" title="Success">
  This is a success alert
</chi-alert>
<!-- Large -->
<chi-alert type="toast" color="success" icon="circle-check" size="lg">
  This is a large success alert
</chi-alert>
<!-- Large Titled -->
<chi-alert type="toast" color="success" icon="circle-check" size="lg" title="Success">
  This is a large success alert
</chi-alert>

Use size classes to customize the size of an alert. Supported size classes are -sm, -md, and -lg.

<!-- Small -->
<div class="chi-alert -toast -success -sm" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a small success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Small Titled -->
<div class="chi-alert -toast -success -sm" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a small success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Medium -->
<div class="chi-alert -toast -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Medium Titled -->
<div class="chi-alert -toast -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Large -->
<div class="chi-alert -toast -success -lg" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a large success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Large Titled -->
<div class="chi-alert -toast -success -lg" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a large success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>

Sizes

This is a small success alert

md (default)

This is a success alert

Web Component
HTML Blueprint

Use the size="" attribute to customize the size of an alert. Supported sizes are sm, md.

<!-- Small -->
<chi-alert type="toast" color="success" icon="circle-check" size="sm">
  This is a small success alert
</chi-alert>
<!-- Small Titled -->
<chi-alert type="toast" color="success" icon="circle-check" size="sm" title="Success">
  This is a small success alert
</chi-alert>
<!-- Medium -->
<chi-alert type="toast" color="success" icon="circle-check">
  This is a success alert
</chi-alert>
<!-- Medium Titled -->
<chi-alert type="toast" color="success" icon="circle-check" title="Success">
  This is a success alert
</chi-alert>

Use size classes to customize the size of an alert. Supported size classes are -sm, -md.

<!-- Small -->
<div class="chi-alert -toast -success -sm" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a small success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Small Titled -->
<div class="chi-alert -toast -success -sm" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a small success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Medium -->
<div class="chi-alert -toast -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__text">This is a success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>
<!-- Medium Titled -->
<div class="chi-alert -toast -success" role="alert">
  <i class="chi-alert__icon chi-icon icon-circle-check" aria-hidden="true"></i>
  <div class="chi-alert__content">
    <p class="chi-alert__title">Success</p>
    <p class="chi-alert__text">This is a success alert</p>
  </div>
  <button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
    <div class="chi-button__content">
      <i class="chi-icon icon-x" aria-hidden="true"></i>
    </div>
  </button>
</div>

Web Component

Properties

Property	Attribute	Description	Type	Default
`center`	`center`	to center the alert content.	`boolean`	`false`
`closable`	`closable`	to make the alert dismissible.	`boolean`	`false`
`color`	`color`	to set alert state.	`"danger" \| "info" \| "muted" \| "success" \| "warning"`	undefined
`icon`	`icon`	to avoid the necessity of adding <chi-icon> to alert markup.	`string`	undefined
`mutable`	`mutable`	to hide the alert when dismissed.	`boolean`	`true`
`size`	`size`	to set alert size { sm, md, lg }.	`string`	`'md'`
`spinner`	`spinner`	To render alert with Spinner	`boolean`	`false`
`title`	`title`	to define alert title.	`string`	undefined
`type`	`type`	to set alert type { bubble, banner, toast }.	`string`	`'bubble'`

Events

Event	Description	Type
`dismissAlert`	custom event when trying to dismiss an alert.	`CustomEvent<void>`

Accessibility

Accessibility guidelines coming soon