NorbieLink
search close
Press↑↓to navigate ↵to openEscto close
Home › Components › Alert

Alert

arrow_back arrow_forward

Displays a callout for user attention — informational, success, warning, or error.

info
Information
Your account settings have been updated successfully.
check_circle
Success
Your project was published and is now live.
warning
Warning
You are approaching your storage limit.
error
Error
Unable to save changes. Check your connection.
<div class="alert alert-info">
  <span class="material-icons-round alert-icon">info</span>
  <div>
    <div class="alert-title">Information</div>
    <div class="alert-desc">Your account settings have been updated.</div>
  </div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

Usage

Import
<link rel="stylesheet" href="ds-shared.css">
Basic structure
<div class="alert alert-info">
  <span class="material-icons-round alert-icon">info</span>
  <div>
    <div class="alert-title">Title</div>
    <div class="alert-desc">Description text here.</div>
  </div>
</div>

Examples

Inline with dismiss button

info
New version v2.4.0 is available.
close
check_circle
Password changed successfully.
close 
<div class="alert alert-info" style="align-items:center;">
  <span class="material-icons-round alert-icon">info</span>
  <div style="flex:1">
    <div class="alert-title">New version available.</div>
  </div>
  <span class="material-icons-round" style="font-size:18px;color:#2980B9;cursor:pointer;">close</span>
</div>

API Reference

Variant classes

ClassColorUse case
alert-infoBlue (#2980B9)Informational messages
alert-successGreen (#1D9E6B)Success confirmations
alert-warningAmber (#E6A817)Warnings and cautions
alert-errorRed (#C0392B)Errors and failures

Dark variants

ClassNotes
alert-dk alert-info-dkDark info variant
alert-dk alert-success-dkDark success variant
alert-dk alert-warning-dkDark warning variant
alert-dk alert-error-dkDark error variant