Alert FigmaFigma Code Connected

Alerts are brief, static messages that appear after an action has been performed, either asynchronously to alert the user immediately or following a page refresh.

Default alert

Create an alert by adding .hc-alert to any element. Its immediate child should be an icon followed by a container element with class .hc-alert-content. Place a title as an h6.hc-alert-title and a message as a p.hc-alert-title, or both in here.

The title and message placement are handled automatically. If both are short enough, they will sit horizontally next to each other; if one is too long for the container, they will wrap and stack vertically instead.

Alert title

This is the alert message text for a default horizontally stacked alert.

You have an alert with a very long title!

Because the title and this message so long, they should always stack vertically.

HTML

Expand Edit in Playground Copy


<div class="hc-alert">
  <i class="hc-icon hc-icon--info-circle hc-icon--20 hc-icon--solid"></i>
  <section class="hc-alert-content">
    <h6 class="hc-alert-title">Alert title</h6>
    <p class="hc-alert-message">This is the alert message text for a default horizontally stacked alert.</p>
  </section>
</div>
<div class="hc-alert">
  <i class="hc-icon hc-icon--info-circle hc-icon--20 hc-icon--solid"></i>
  <section class="hc-alert-content">
    <h6 class="hc-alert-title">You have an alert with a very long title!</h6>
    <p class="hc-alert-message">Because the title and this message so long, they should always stack vertically.</p>
  </section>
</div>

Width handling is up to you

Note that the alert will fill the width of whatever outer container it sits within. You can control the width directly on the alert yourself or with any utility class available (like .w-48), or by setting the width on any wrapping element.

Semantic alert

Semantic options for info, success, warning, and danger are also available. Append the class .hc-alert--info, etc., to the top level .hc-alert element.

Swap out the icons for these using the examples below.

Please update your password.

We now require stronger passwords. Read more here.

Your profile has been updated!

Your profile changes have been saved.

We had trouble finding that user.

Make sure the email address or name you entered is correct and try again.

Your account has been deleted.

This action cannot be undone. We're sorry to see you go 😞.

HTML

Expand Edit in Playground Copy


<div class="hc-alert hc-alert--info">
  <i class="hc-icon hc-icon--info-circle hc-icon--20 hc-icon--solid"></i>
  <section class="hc-alert-content">
    <h6 class="hc-alert-title">Please update your password.</h6>
    <p class="hc-alert-message">We now require stronger passwords. <a href="/" class="hc-link">Read more here.</a></p>
  </section>
</div>
<div class="hc-alert hc-alert--success">
  <i class="hc-icon hc-icon--check-circle hc-icon--20 hc-icon--solid"></i>
  <section class="hc-alert-content">
    <h6 class="hc-alert-title">Your profile has been updated!</h6>
    <p class="hc-alert-message">Your profile changes have been saved.</p>
  </section>
</div>
<div class="hc-alert hc-alert--warning">
  <i class="hc-icon hc-icon--warning-triangle hc-icon--20 hc-icon--solid"></i>
  <section class="hc-alert-content">
    <h6 class="hc-alert-title">We had trouble finding that user.</h6>
    <p class="hc-alert-message">Make sure the email address or name you entered is correct and try again.</p>
  </section>
</div>
<div class="hc-alert hc-alert--danger">
  <i class="hc-icon hc-icon--exclamation-circle hc-icon--20 hc-icon--solid"></i>
  <section class="hc-alert-content">
    <h6 class="hc-alert-title">Your account has been deleted.</h6>
    <p class="hc-alert-message">This action cannot be undone. We're sorry to see you go 😞.</p>
  </section>
</div>

Close button

Add a close button to the right of the alert by adding an element with class .hc-alert-close immediately after the .hc-alert-content element. This element can be anything, but we recommend it be a button for accessibility.

Your profile has been saved!

Your changes should now appear below.

HTML

Expand Edit in Playground Copy


<div class="hc-alert hc-alert--success">
  <i class="hc-icon hc-icon--check-circle hc-icon--20 hc-icon--solid"></i>
  <section class="hc-alert-content">
    <h6 class="hc-alert-title">Your profile has been saved!</h6>
    <p class="hc-alert-message">Your changes should now appear below.</p>
  </section>
  <button class="hc-alert-close hc-button hc-button--icon hc-button--tertiary hc-button--sm">
    <i class="hc-icon hc-icon--close hc-icon--20"></i>
  </button>
</div>

Other options

Force vertical stacking by appending the class .hc-alert--vertical to the parent .hc-alert element.

A small title.

A short message vertically stacked.

HTML

Expand Edit in Playground Copy


<div class="hc-alert hc-alert--vertical">
  <i class="hc-icon hc-icon--info-circle hc-icon--20 hc-icon--solid"></i>
  <section class="hc-alert-content">
    <h6 class="hc-alert-title">A small title.</h6>
    <p class="hc-alert-message">A short message vertically stacked.</p>
  </section>
</div>

Only a title or a message are required. You can omit one of them and the alert will handle this automatically.

This alert only has a title. It's tiny!

This alert only has a message and we're going to make it long enough so that it always wraps and we want to see what that looks like.

HTML

Expand Edit in Playground Copy


<div class="hc-alert hc-alert--info">
  <i class="hc-icon hc-icon--info-circle hc-icon--20 hc-icon--solid"></i>
  <section class="hc-alert-content">
    <h6 class="hc-alert-title">This alert only has a title. It's tiny!</h6>
  </section>
</div>
<div class="hc-alert hc-alert--success">
  <i class="hc-icon hc-icon--check-circle hc-icon--20 hc-icon--solid"></i>
  <section class="hc-alert-content">
    <p class="hc-alert-message">
      This alert only has a message and we're going to make it long enough so that it always wraps and we want to see what that looks like.
    </p>
  </section>
</div>