Components

Alerts

Communicate primary guidance, info, success, warning, and danger 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.

Contextual variants

PrimaryHighlighted guidance or important feature notice.

InformationScheduled maintenance will begin at 02:00 UTC.

SuccessYour configuration changes were published successfully.

WarningThis environment contains uncommitted migrations.

DangerUnable to connect to the database cluster.

Neutral noteThe base alert works without any color modifier.

HTML · Contextual alert variants

<!-- Primary alert -->
<div class="bs-alert bs-alert-primary" role="status">
  <i data-lucide="info" class="bs-icon" aria-hidden="true"></i>
  <span><strong class="bs-alert-title">Primary</strong> Highlighted guidance or notice.</span>
</div>

<!-- Informational alert -->
<div class="bs-alert bs-alert-info" role="status">
  <i data-lucide="info" class="bs-icon" aria-hidden="true"></i>
  <span><strong class="bs-alert-title">Information</strong> Scheduled maintenance at 02:00 UTC.</span>
</div>

<!-- Success alert -->
<div class="bs-alert bs-alert-success" role="status">
  <i data-lucide="check" class="bs-icon" aria-hidden="true"></i>
  <span><strong class="bs-alert-title">Success</strong> Changes were published.</span>
</div>

<!-- Warning alert -->
<div class="bs-alert bs-alert-warning" role="status">
  <i data-lucide="triangle-alert" class="bs-icon" aria-hidden="true"></i>
  <span><strong class="bs-alert-title">Warning</strong> Environment contains uncommitted migrations.</span>
</div>

<!-- Danger alert -->
<div class="bs-alert bs-alert-danger" role="alert">
  <i data-lucide="circle-alert" class="bs-icon" aria-hidden="true"></i>
  <span><strong class="bs-alert-title">Danger</strong> Unable to connect to cluster.</span>
</div>

<!-- Neutral base alert -->
<div class="bs-alert" role="status">
  <i data-lucide="message-square" class="bs-icon" aria-hidden="true"></i>
  <span><strong class="bs-alert-title">Neutral note</strong> Base alert without modifier.</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, .bs-alert-info, .bs-alert-success, .bs-alert-warning, or .bs-alert-danger to match the context.

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-info`	Informational notice or operational context.
`.bs-alert-success`	Successful completion or positive confirmation feedback.
`.bs-alert-warning`	Cautionary notice or non-blocking issue.
`.bs-alert-danger`	Critical failure or blocking error condition.