Alert

Contextual message banners with icon, content, and optional dismiss button. Style variants: --subtle (default), --accent,--solid, --outline. Accepts role modifiers for info, success, warning, and danger.

Roles

<div class="ln-alert ln-alert--info">
  <div class="ln-alert__content">
    <div class="ln-alert__title">Information</div>
    <div class="ln-alert__body">This is an informational message.</div>
  </div>
</div>
<div class="ln-alert ln-alert--success">
  <div class="ln-alert__content">
    <div class="ln-alert__title">Success</div>
    <div class="ln-alert__body">Your changes have been saved.</div>
  </div>
</div>
<div class="ln-alert ln-alert--warning">
  <div class="ln-alert__content">
    <div class="ln-alert__title">Warning</div>
    <div class="ln-alert__body">Please review before proceeding.</div>
  </div>
</div>
<div class="ln-alert ln-alert--danger">
  <div class="ln-alert__content">
    <div class="ln-alert__title">Error</div>
    <div class="ln-alert__body">Something went wrong. Please try again.</div>
  </div>
</div>

Information

This is an informational message.

Success

Your changes have been saved.

Warning

Please review before proceeding.

Error

Something went wrong. Please try again.

Accent variant

<div class="ln-alert ln-alert--accent ln-alert--info">
  <div class="ln-alert__content">
    <div class="ln-alert__title">Tip</div>
    <div class="ln-alert__body">The accent variant adds a colored left border.</div>
  </div>
</div>

Tip

The accent variant adds a colored left border.

Dismissible

<div class="ln-alert ln-alert--success" data-ln-dismissible>
  <div class="ln-alert__content">
    <div class="ln-alert__title">Saved</div>
    <div class="ln-alert__body">Your profile has been updated.</div>
  </div>
  <button class="ln-alert__dismiss" data-ln-dismiss aria-label="Dismiss">&times;</button>
</div>

Saved

Your profile has been updated.

Reference

Class	Description	Responsive
`.ln-alert`	Alert container	No
`.ln-alert__icon`	Leading icon	No
`.ln-alert__content`	Content wrapper	No
`.ln-alert__title`	Alert heading	No
`.ln-alert__body`	Alert body text	No
`.ln-alert__actions`	Action buttons container	No
`.ln-alert__dismiss`	Dismiss button	No
`.ln-alert--solid`	Filled background variant	No
`.ln-alert--accent`	Left border accent variant	No
`.ln-alert--banner`	Full-width banner variant	No
`.ln-alert--compact`	Reduced padding	No
`.ln-alert--{role}`	Role modifier (primary, secondary, success, warning, danger, info)	No