Components

Alerts

Communicate success, warning, danger, and informational messages with appropriate semantics.

Components guideCopy-ready referencev0.7.0 current

Components

Alerts

Alerts communicate inline feedback. Pair .bs-alert with a state modifier and use .bs-alert-title for a clear lead-in.

Heads upThis preview is ready for your custom theme.

SavedYour changes were published successfully.

Neutral noteThe base alert works without a state modifier.

HTML · Complete example

<div class="bs-alert bs-alert-success" role="status">
  <i data-lucide="check" class="bs-icon bs-icon-lg" aria-hidden="true"></i>
  <span><strong class="bs-alert-title">Saved</strong> Your changes were published.</span>
</div>

Structure

Combine an optional decorative icon with a text wrapper. Put the short summary in .bs-alert-title before the supporting message.

Class map

.bs-alert is neutral. Add .bs-alert-primary for highlighted guidance or .bs-alert-success for successful outcomes.

Accessibility

Use role="status" for dynamic, non-urgent feedback and role="alert" sparingly for urgent errors. Never rely on color alone.

Informational alert

Use status for helpful information that should not interrupt the user.

Deployment queuedYour change will start after the active build completes.

HTML · Informational status

<div class="bs-alert bs-alert-primary" role="status">
  <span><strong class="bs-alert-title">Deployment queued</strong>Your change will start after the active build completes.</span>
</div>

Success alert

Pair the contextual surface with explicit text so success is not communicated by color alone.

Changes savedYour notification settings are up to date.

HTML · Success status

<div class="bs-alert bs-alert-success" role="status">
  <span><strong class="bs-alert-title">Changes saved</strong>Your notification settings are up to date.</span>
</div>

Alert API

The visual variant describes emphasis; the ARIA role describes announcement behavior. Choose each independently.

Class	Purpose
`.bs-alert`	Neutral alert layout, spacing, border, and surface.
`.bs-alert-title`	High-contrast summary placed before supporting copy.
`.bs-alert-primary`	Brand-highlighted guidance or informational emphasis.
`.bs-alert-success`	Successful completion or confirmation feedback.