Alert

Alert Figma JS

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

Alerts come in both HTML and web component implementations.

Create an HTML 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 in any element with class .hc-alert-title and a message in an element with class .hc-alert-title, or both, in this content section.

Create a JS alert with the <hc-alert> element. The icon is handled via attribute and should take the icon’s class name. The title and message are slots.

Alert title

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.

Alert title

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.
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">
    <div class="hc-alert-title">Alert title</div>
    <p class="hc-alert-message">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">
    <div class="hc-alert-title">You have an alert with a very long title!</div>
    <p class="hc-alert-message">Because the title and this message so long, they should always stack vertically.</p>
  </section>
</div>


<hc-alert icon="info-circle" close>
  <div slot="title">Alert title</div>
  <p slot="message">Message text for a default horizontally stacked alert.</p>
</hc-alert>
<hc-alert icon="info-circle" close>
  <div slot="title">You have an alert with a very long title!</div>
  <p slot="message">Because the title and this message so long, they should always stack vertically.</p>
</hc-alert>

Title and message stacking

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.

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. For the JS version, pass these types into the attribute type.

Use the following recommended icons for each semantic type in the preview below. Note that for the JS component, you only need to pass in icon without a value and it will show the default icon for that type.

Please update your password.

We now require stronger passwords. Read more here.

Your profile has been updated!

Your profile changes have been saved. View account.

We had trouble finding that user.

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

Your account has been deleted.

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

Please update your password.

We now require stronger passwords. Read more here.
Your profile has been updated!

Your profile changes have been saved. View account.
We had trouble finding that user.

Make sure the email address or name you entered is correct and try again. Search again.
Your account has been deleted.

This action cannot be undone. We're sorry to see you go 😞. Back to homepage.
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">
    <div class="hc-alert-title">Please update your password.</div>
    <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">
    <div class="hc-alert-title">Your profile has been updated!</div>
    <p class="hc-alert-message">Your profile changes have been saved. <a href="/" class="hc-link">View account.</a></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">
    <div class="hc-alert-title">We had trouble finding that user.</div>
    <p class="hc-alert-message">Make sure the email address or name you entered is correct and try again. <a href="/" class="hc-link">Search again.</a></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">
    <div class="hc-alert-title">Your account has been deleted.</div>
    <p class="hc-alert-message">This action cannot be undone. We're sorry to see you go 😞. <a href="/" class="hc-link">Back to homepage.</a></p>
  </section>
</div>


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

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.

For the web component, simply pass in the attribute close. It’s a boolean but doesn’t need a value.

If this button only contains an icon, please also add an appropriate aria-label value.

Your profile has been saved!

Your changes should now appear below.

Your profile has been saved!

Your changes should now appear below.
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">
    <div class="hc-alert-title">Your profile has been saved!</div>
    <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" aria-label="Close this alert">
    <i class="hc-icon hc-icon--close hc-icon--20"></i>
  </button>
</div>


<hc-alert type="success" icon="check-circle" close>
  <div slot="title">Your profile has been saved!</div>
  <p slot="message">Your changes should now appear below.</p>
</hc-alert>

Close handling

Note that for the HTML version, closing or dismissing the alert is not built in. For the JS version, close handling is taken care of.

Full bleed variant

Alerts inside of Modals, Cards, or other bounded boxes look a lot better when they lose their horizontal borders and extend the full width of the container.

This treatment does not happen automatically in these elements, but you can apply it anywhere with the modifier .hc-alert--full on the HTML component or adding the boolean attribute full to the JS component.

Send invitations

Send an invitation for users to log in to the platform if they haven't yet. Users don't have to log in to receive and respond to communications. Learn more.

Choose the audience to send invitations:

Send invitations

Send an invitation for users to log in to the platform if they haven't yet. Users don't have to log in to receive and respond to communications. Learn more.
Choose the audience to send invitations:
Expand Edit in Playground Copy 

<div class="hc-modal-box">
  <header class="hc-modal-header">
    <i class="hc-icon hc-icon--send"></i>
    <h3 class="hc-h3 hc-modal-header-title">
      Send invitations
    </h3>
    <form method="dialog">
      <button class="hc-button hc-button--icon hc-button--secondary" aria-label="Close this alert">
        <i class="hc-icon hc-icon--close"></i>
      </button>
    </form>
  </header>
  <div class="hc-alert hc-alert--full hc-alert--info">
    <section class="hc-alert-content">
      <p class="hc-alert-message">
        Send an invitation for users to log in to the platform if they haven't yet. Users don't have to log in to receive and respond to communications. <a href="#" class="hc-link">Learn more</a>.
      </p>
    </section>
  </div>
  <section class="hc-modal-content">
    <span class="hc-form-control">
      <span class="hc-label-text">Choose the audience to send invitations:</span>
    </span>
    <label class="hc-form-control hc-form-control--shrink">
      <input type="checkbox" class="hc-checkbox" />
      <span class="hc-label">
        <span class="hc-label-text">Staff (37)</span>
      </span>
    </label>
    <label class="hc-form-control hc-form-control--shrink">
      <input type="checkbox" class="hc-checkbox" />
      <span class="hc-label">
        <span class="hc-label-text">Guardians (29)</span>
      </span>
    </label>
    <label class="hc-form-control hc-form-control--shrink">
      <input type="checkbox" class="hc-checkbox" />
      <span class="hc-label">
        <span class="hc-label-text">Students (4)</span>
      </span>
    </label>
  </section>
  <footer class="hc-modal-footer hc-modal-footer--end">
    <button class="hc-button hc-button--secondary">
      Cancel
    </button>
    <form method="dialog">
      <button class="hc-button hc-button--primary hc-button--success">
        Send
      </button>
    </form>
  </footer>
</div>


<div class="hc-modal-box">
  <header class="hc-modal-header">
    <i class="hc-icon hc-icon--send"></i>
    <h3 class="hc-h3 hc-modal-header-title">
      Send invitations
    </h3>
    <form method="dialog">
      <button class="hc-button hc-button--icon hc-button--secondary" aria-label="Close this alert">
        <i class="hc-icon hc-icon--close"></i>
      </button>
    </form>
  </header>
  <hc-alert type="info" full>
    <p slot="message">Send an invitation for users to log in to the platform if they haven't yet. Users don't have to log in to receive and respond to communications. <a href="#" class="hc-link">Learn more</a>.</p>
  </hc-alert>
  <section class="hc-modal-content">
    <span class="hc-form-control">
      <span class="hc-label-text">Choose the audience to send invitations:</span>
    </span>
    <label class="hc-form-control hc-form-control--shrink">
      <input type="checkbox" class="hc-checkbox" />
      <span class="hc-label">
        <span class="hc-label-text">Staff (37)</span>
      </span>
    </label>
    <label class="hc-form-control hc-form-control--shrink">
      <input type="checkbox" class="hc-checkbox" />
      <span class="hc-label">
        <span class="hc-label-text">Guardians (29)</span>
      </span>
    </label>
    <label class="hc-form-control hc-form-control--shrink">
      <input type="checkbox" class="hc-checkbox" />
      <span class="hc-label">
        <span class="hc-label-text">Students (4)</span>
      </span>
    </label>
  </section>
  <footer class="hc-modal-footer hc-modal-footer--end">
    <button class="hc-button hc-button--secondary">
      Cancel
    </button>
    <form method="dialog">
      <button class="hc-button hc-button--primary hc-button--success">
        Send
      </button>
    </form>
  </footer>
</div>

Full width alerts accept semantic modifiers just the same and can contain the same optional elements as regular alerts.

Despite the fact that this component is called “alert,” you should use this component to present explanatory information or subheading text as well. The full-width variant is great for these use cases.

Other options

Force vertical stacking by appending the class .hc-alert--vertical to the parent .hc-alert element. For the JS component, simply add the boolean attribute vertical.

A small title.

A short message vertically stacked.

A small title.

A short message vertically stacked.
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">
    <div class="hc-alert-title">A small title.</div>
    <p class="hc-alert-message">A short message vertically stacked.</p>
  </section>
</div>


<hc-alert icon="info-circle" vertical>
  <div slot="title">A small title.</div>
  <p slot="message">A short message vertically stacked.</p>
</hc-alert>

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.

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.
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">
    <div class="hc-alert-title">This alert only has a title. It's tiny!</div>
  </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>


<hc-alert type="info" icon="info-circle" vertical>
  <div slot="title">This alert only has a title. It's tiny!</div>
</hc-alert>
<hc-alert type="success" icon="check-circle" vertical>
  <div slot="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.</div>
</hc-alert>