Toast

Toasts provide a temporary or dismissable notification positioned in the corner of the application window. Honeycomb provides all style and positional classes but triggering toasts and handling close or delays are currently up to you.

Default toast

Create a default toast by adding .hc-toast to a parent element that contains at least a child content wrapper with class .hc-toast-content.

This is a default Toast message

HTML

Expand Edit in Playground Copy


<div class="hc-toast hc-is--active" role="status">
  <span class="hc-toast-content">
    This is a default Toast message
  </span>
</div>

Accessibility note

The .hc-toast element must have an appropriate role attribute of either status, alert, or log. See the section on accessibility below for more details.

Icon and buttons

Add an icon as the first child element inside of the .hc-toast container. It will always vertically center and be the left-most element.

If adding a CTA button alongside a message, wrap the message in .hc-toast-message first. Then create a button with class .hc-toast-button and place it at the end of the .hc-toast-content wrapper.

You can also add a close button by wrapping an icon button inside of an element with class .hc-toast-close as the final child element inside the toast.

Toast content so that we make this super long and what happens to the toast when it gets big.

HTML

Expand Edit in Playground Copy


<div class="hc-toast toast--connect hc-is--active" role="status">
  <i class="hc-icon hc-icon--check-circle hc-icon--solid"></i>
  <span class="hc-toast-content">
    <span class="hc-toast-message">Toast content so that we make this super long and what happens to the toast when it gets big.</span>
    <button class="hc-toast-button hc-button hc-button--primary hc-button--sm">CTA button</button>
  </span>
  <span class="hc-toast-close">
    <button class="hc-button hc-button--tertiary hc-button--icon hc-button--sm" aria-label="Close message">
      <i class="hc-icon hc-icon--close"></i>
    </button>
  </span>
</div>

If all three items are present there will be three children within the .hc-toast.

Position

Position the toast to the default top-right by adding .hc-toast--top-right to the toast element. Other positions available include .hc-toast--bottom-right, .hc-toast--bottom-left, and .hc-toast--top-left.

These position classes add position: fixed; and an appopriate offset so that they align themselves to the viewport itself. Note that if you inspect these examples here, however, they are absolutely positioned so that they sit inside the example boxes.

Default toast at top right.

Toast at bottom right.

Toast at bottom left.

Toast at top left.

HTML

Expand Edit in Playground Copy


<div class="hc-toast hc-toast--top-right hc-is--active" role="status">
  <span class="hc-toast-content">
    Default toast at top right.
  </span>
</div>
<div class="hc-toast hc-toast--bottom-right hc-is--active" role="status">
  <span class="hc-toast-content">
    Toast at bottom right.
  </span>
</div>
<div class="hc-toast hc-toast--bottom-left hc-is--active" role="status">
  <span class="hc-toast-content">
    Toast at bottom left.
  </span>
</div>
<div class="hc-toast hc-toast--top-left hc-is--active" role="status">
  <span class="hc-toast-content">
    Toast at top left.
  </span>
</div>

Muiltiple toasts

If you need to stack more than one toast, or you just want to leave open the option of stacking more than one, wrap any and all toasts inside of an .hc-toast-wrapper element instead.

Apply position classes to this wrapper element, not the .hc-toast themselves.

This toast was triggered first. Success!

This toast was triggered second and sits below the first.

HTML

Expand Edit in Playground Copy


<div class="hc-toast-wrapper hc-toast--top-right" role="status">
  <div class="hc-toast hc-toast--success hc-is--active">
    <span class="hc-toast-content">
      This toast was triggered first. Success!
    </span>
  </div>
  <div class="hc-toast hc-toast--info hc-is--active" role="status">
    <span class="hc-toast-content">
      This toast was triggered second and sits below the first.
    </span>
  </div>
</div>

Product toasts

Create a branded toast either directly with a class name or through the brand theme that you’ve applied.

The branded theme is preferred and you only need to add .hc-is--brand to the toast element itself, after applying a theme to the <body> element.

Alternatively, you can directly create a specific branded toast by adding the classes .hc-toast--attend, .hc-toast--boost, .hc-toast--connect, and .hc-toast--forms to style the toast in the branded product colors respectively. This will override any theme.

This is an Attend toast message.

This is a Boost toast message.

This is a Connect toast message.

This is a Forms toast message.

This is a themed toast message.

HTML

Expand Edit in Playground Copy


<div class="hc-toast hc-toast--attend hc-is--active" role="status">
  <i class="hc-icon hc-icon--check-circle hc-icon--solid"></i>
  <span class="hc-toast-content">
    <span class="hc-toast-message">This is an Attend toast message.</span>
    <button class="hc-toast-button hc-button hc-button--sm hc-button--secondary hc-button--attend">Button</button>
  </span>
  <span class="hc-toast-close">
    <button class="hc-button hc-button--tertiary hc-button--icon hc-button--sm" aria-label="Close message">
      <i class="hc-icon hc-icon--close"></i>
    </button>
  </span>
</div>
<div class="hc-toast hc-toast--boost hc-is--active" role="status">
  <i class="hc-icon hc-icon--check-circle hc-icon--solid"></i>
  <span class="hc-toast-content">
    <span class="hc-toast-message">This is a Boost toast message.</span>
    <button class="hc-toast-button hc-button hc-button--sm hc-button--secondary hc-button--boost">Button</button>
  </span>
  <span class="hc-toast-close">
    <button class="hc-button hc-button--tertiary hc-button--icon hc-button--sm">
      <i class="hc-icon hc-icon--close"></i>
    </button>
  </span>
</div>
<div class="hc-toast hc-toast--connect hc-is--active" role="status">
  <i class="hc-icon hc-icon--check-circle hc-icon--solid"></i>
  <span class="hc-toast-content">
    <span class="hc-toast-message">This is a Connect toast message.</span>
    <button class="hc-toast-button hc-button hc-button--sm hc-button--secondary hc-button--connect">Button</button>
  </span>
  <span class="hc-toast-close">
    <button class="hc-button hc-button--tertiary hc-button--icon hc-button--sm" aria-label="Close message">
      <i class="hc-icon hc-icon--close"></i>
    </button>
  </span>
</div>
<div class="hc-toast hc-toast--forms hc-is--active" role="status">
  <i class="hc-icon hc-icon--check-circle hc-icon--solid"></i>
  <span class="hc-toast-content">
    <span class="hc-toast-message">This is a Forms toast message.</span>
    <button class="hc-toast-button hc-button hc-button--sm hc-button--secondary hc-button--forms">Button</button>
  </span>
  <span class="hc-toast-close">
    <button class="hc-button hc-button--tertiary hc-button--icon hc-button--sm" aria-label="Close message">
      <i class="hc-icon hc-icon--close"></i>
    </button>
  </span>
</div>
<div class="hc-toast hc-is--brand hc-is--active" role="status">
  <i class="hc-icon hc-icon--check-circle hc-icon--solid"></i>
  <span class="hc-toast-content">
    <span class="hc-toast-message">This is a themed toast message.</span>
    <button class="hc-toast-button hc-button hc-button--sm hc-button--secondary hc-is--brand">Button</button>
  </span>
  <span class="hc-toast-close">
    <button class="hc-button hc-button--tertiary hc-button--icon hc-button--sm" aria-label="Close message">
      <i class="hc-icon hc-icon--close"></i>
    </button>
  </span>
</div>

Important Note

Previously the theme was applied with the component-specific class, .hc-toast--brand. This has been replaced as of v0.3.0 to standardize brand variations with .hc-is--brand.

Semantic toasts

Success, info, warning, and danger variants are all available with the classes .hc-toast--success, .hc-toast--info, .hc-toast--warning, and .hc-toast--danger, respectively.

Note that the CTA button should have .hc-button--primary and that we have a slight style variation to this button.

This is a success toast message

This is an info toast message

This is a warning toast message

This is a danger toast message

HTML

Expand Edit in Playground Copy


<div class="hc-toast hc-toast--success hc-is--active" role="status">
  <i class="hc-icon hc-icon--check-circle hc-icon--solid"></i>
  <span class="hc-toast-content">
    <span class="hc-toast-message">This is a success toast message</span>
    <button class="hc-toast-button hc-button hc-button--primary hc-button--sm">Success CTA</button>
  </span>
  <span class="hc-toast-close">
    <button class="hc-button hc-button--tertiary hc-button--icon hc-button--sm" aria-label="Close message">
      <i class="hc-icon hc-icon--close"></i>
    </button>
  </span>
</div>
<div class="hc-toast hc-toast--info hc-is--active" role="log">
  <i class="hc-icon hc-icon--info-circle hc-icon--solid"></i>
  <span class="hc-toast-content">
    <span class="hc-toast-message">This is an info toast message</span>
    <button class="hc-toast-button hc-button hc-button--primary hc-button--sm">Info CTA</button>
  </span>
  <span class="hc-toast-close">
    <button class="hc-button hc-button--tertiary hc-button--icon hc-button--sm" aria-label="Close message">
      <i class="hc-icon hc-icon--close"></i>
    </button>
  </span>
</div>
<div class="hc-toast hc-toast--warning hc-is--active" role="alert">
  <i class="hc-icon hc-icon--warning-triangle hc-icon--solid"></i>
  <span class="hc-toast-content">
    <span class="hc-toast-message">This is a warning toast message</span>
    <button class="hc-toast-button hc-button hc-button--primary hc-button--sm">Warning CTA</button>
  </span>
  <span class="hc-toast-close">
    <button class="hc-button hc-button--tertiary hc-button--icon hc-button--sm" aria-label="Close message">
      <i class="hc-icon hc-icon--close"></i>
    </button>
  </span>
</div>
<div class="hc-toast hc-toast--danger hc-is--active" role="alert">
  <i class="hc-icon hc-icon--warning-circle hc-icon--solid"></i>
  <span class="hc-toast-content">
    <span class="hc-toast-message">This is a danger toast message</span>
    <button class="hc-toast-button hc-button hc-button--primary hc-button--sm">Danger CTA</button>
  </span>
  <span class="hc-toast-close">
    <button class="hc-button hc-button--tertiary hc-button--icon hc-button--sm" aria-label="Close message">
      <i class="hc-icon hc-icon--close"></i>
    </button>
  </span>
</div>

Accessibility note

Note that the .hc-toast--success and .hc-toast--warning semantic states changed the role value to alert. Read more about this below.

Accessibility

WCAG 4.1.3 requires an appropriate role value attached to the .hc-toast element. These values can be status, alert, or log depending on the context.

In general, use status unless either of these two conditions are met:

If the message is a suggested action to take or an error warning, use alert instead
If the message conveys info on the progress of a process, use log instead.

More information

The role="status" attribute is appropriate in all cases where the Toast tells the user of some sucess or result of an action, as well as the state of the application—which is nearly all use cases for a Toast.

The only cases where alert is recommended is when you’re using .hc-toast--danger or .hc-toast--warning because of some negative outcome.

log should rarely if ever be used, as progress is more appropriately conveyed via the Progress component, though the .hc-toast--info semantic state would be appropriate for log-level messages if it’s conveying “sequential information updates.”

This toast was triggered and is positioned relative to the document body.