Messages & Toasts

wf-message is an inline alert component for surfacing status, validation feedback, and contextual information within the page flow. wf-toast is its fixed-position sibling – a stacking container for transient notifications that appear over the UI without disrupting layout. Both share the same color system, inner structure, and accent stripe.

Color Variants

Semantic Colors

Six semantic color variants with matching accent stripe, tinted background, and border.

This action completed successfully.

Something went wrong. Please try again.

Your session will expire in 5 minutes.

A new version of this record is available.

Your changes have been saved as a draft.

Review the linked documentation before continuing.

<div class="wf-message wf-message-positive">...</div>
<div class="wf-message wf-message-negative">...</div>
<div class="wf-message wf-message-alert">...</div>
<div class="wf-message wf-message-info">...</div>
<div class="wf-message wf-message-primary">...</div>
<div class="wf-message wf-message-secondary">...</div>

With Icon & Title

Full Structure

Use wf-message-icon , wf-message-body , wf-message-title , and wf-message-close for a fully composed message.

Payment confirmed Your order has been placed and will ship within 2 business days.

Form could not be submitted Please fix the errors below before trying again.

Action required Your billing information is incomplete. Update it to avoid service interruption.

Scheduled maintenance The system will be unavailable on Saturday 9–11 PM UTC.

<div class="wf-message wf-message-positive">
  <span class="wf-message-icon">
    <i class="icon checkmark circle" aria-hidden="true"></i>
  </span>
  <div class="wf-message-body">
    <span class="wf-message-title">Payment confirmed</span>
    Your order has been placed and will ship within 2 business days.
  </div>
  <button class="wf-message-close" type="button" aria-label="Dismiss">
    <i class="icon close" aria-hidden="true"></i>
  </button>
</div>

Style Modifiers

Filled wf-message-filled

Doubles the tint intensity for a more prominent background.

Changes saved successfully.

Upload failed. Max size is 10 MB.

Read-only mode is active.

<div class="wf-message wf-message-positive wf-message-filled">
  ...
</div>

Borderless wf-message-borderless

Removes the outer border while keeping the left accent stripe.

Deployed to production.

Unsaved changes detected.

Draft auto-saved at 14:32.

<div class="wf-message wf-message-positive wf-message-borderless">
  ...
</div>

Floating wf-message-floating

Adds a drop shadow for an elevated, card-like appearance.

New feature available Explore the redesigned dashboard in settings.

<div class="wf-message wf-message-info wf-message-floating">
  ...
</div>

Compact & Centered

wf-message-compact shrinks to content width. wf-message-center centers text and icon.

Update available

Version 5.2.1 is ready to install.

<div class="wf-message wf-message-secondary wf-message-compact wf-message-center">
  ...
</div>

Sizes

SM / Default / LG

Three size steps adjust padding, gap, and font size.

Small Compact padding, 0.875rem font.

Default Standard padding, 0.937rem font.

Large Generous padding, 1rem font.

<div class="wf-message wf-message-info wf-message-sm">...</div>
<div class="wf-message wf-message-info">...</div>
<div class="wf-message wf-message-info wf-message-lg">...</div>

With List

Validation Errors

A list inside wf-message-body is automatically styled with consistent spacing - useful for surfacing multiple validation errors at once.

Please fix the following errors

Email address is required.
Password must be at least 8 characters.
You must agree to the terms of service.

<div class="wf-message wf-message-negative">
  <span class="wf-message-icon">
    <i class="icon close circle" aria-hidden="true"></i>
  </span>
  <div class="wf-message-body">
    <span class="wf-message-title">Please fix the following errors</span>
    <ul>
      <li>Email address is required.</li>
      <li>Password must be at least 8 characters.</li>
      <li>You must agree to the terms of service.</li>
    </ul>
  </div>
</div>

Attached Messages

Stacked with Another Element

Use wf-message-attached-top and wf-message-attached-bottom to remove the shared border and radius between two adjacent messages, or between a message and a card.

Confirm before proceeding This will permanently delete all selected records.

This action cannot be undone.

<div class="wf-message wf-message-alert wf-message-attached-top">
  ...
</div>
<div class="wf-message wf-message-negative wf-message-attached-bottom">
  ...
</div>

Toast Notifications

Toast Item Structure

wf-toast is a fixed-position container. Each child is a wf-toast-item with the same inner structure as a message. Items slide in on insertion and stack vertically with a gap.

Upload complete 3 files were uploaded successfully.

Connection lost Retrying in 10 seconds…

A background sync is in progress.

<!-- Fixed container, default top-right -->
<div class="wf-toast">
  <div class="wf-toast-item wf-message-positive">
    <span class="wf-message-icon">
      <i class="icon checkmark circle" aria-hidden="true"></i>
    </span>
    <div class="wf-message-body">
      <span class="wf-message-title">Upload complete</span>
      3 files were uploaded successfully.
    </div>
    <button class="wf-message-close" type="button" aria-label="Dismiss">
      <i class="icon cancel" aria-hidden="true"></i>
    </button>
  </div>
</div>

Position Variants

Replace wf-toast with a position modifier to control where the stack appears on screen.

top-left .wf-toast-top-left

top-center .wf-toast-top-center

top-right .wf-toast-top-right

bottom-left .wf-toast-bottom-left

bottom-center .wf-toast-bottom-center

bottom-right .wf-toast-bottom-right

<div class="wf-toast wf-toast-top-right">...</div>
<div class="wf-toast wf-toast-top-left">...</div>
<div class="wf-toast wf-toast-top-center">...</div>
<div class="wf-toast wf-toast-bottom-right">...</div>
<div class="wf-toast wf-toast-bottom-left">...</div>
<div class="wf-toast wf-toast-bottom-center">...</div>

Class Reference

All modifier classes available on .wf-message

Class Name	Type	Description
wf-message	Base	Inline flex alert with a 4px left accent border and tinted background.
wf-message-icon / -body / -title / -close	Children	Icon slot, text wrapper, bold label, and dismiss button – used inside wf-message .
wf-message-*	Color	Accent and tint color: positive · negative · alert · info · primary · secondary .
wf-message-filled	Modifier	Stronger tinted background (40% color-mix vs. the default 15%).
wf-message-borderless / -floating / -compact / -center	Modifier	Remove outer border; add drop shadow; shrink to content width ( inline-flex ); center-align content.
wf-message-sm / wf-message-lg	Size	Smaller or larger padding, gap, and font size. Default sits between the two.
wf-message-attached-top / -bottom	Attachment	Removes the adjacent border and corner radius for flush stacking with another element.
wf-toast	Toast	Fixed-position stacking container (default: top-right).
wf-toast-*	Position	Toast placement: top-right · top-left · top-center , bottom-right · bottom-left · bottom-center .
wf-toast-item	Toast	Individual notification inside wf-toast . Same inner structure as wf-message .