Alerts

Contextual alert boxes for feedback messages with color variants and a reusable close button. Part of the @thenewcss/alerts addon package.

Installation

npm install @thenewcss/alerts

Color Variants

The base .alert creates a styled container. Add a color modifier to match the message context.

Preview

This is an info alert — check it out!

This is a success alert — well done!

This is a warning alert — be careful!

This is a danger alert — something went wrong!

<div class="alert alert-info">This is an info alert — check it out!</div>
<div class="alert alert-success">This is a success alert — well done!</div>
<div class="alert alert-warning">This is a warning alert — be careful!</div>
<div class="alert alert-danger">This is a danger alert — something went wrong!</div>

Close Button

The .btn-close is a reusable close button with an X icon that can be used in alerts, modals, and other components.

Preview

<button class="btn-close" aria-label="Close"></button>

Dismissible Alerts

Add .alert-dismissible to position a close button inside the alert with extra right padding.

Preview

Warning! Something needs your attention.

Success! Your changes have been saved.

<div class="alert alert-warning alert-dismissible">
  <strong>Warning!</strong> Something needs your attention.
  <button class="btn-close" aria-label="Close"></button>
</div>

Class Reference

Base

Class	Description
`.alert`	Base alert container with padding, border, border-radius, and default blue/info styling.
`.alert-dismissible`	Adds extra right padding and positions .btn-close in the top-right corner.
`.btn-close`	Reusable close button with X icon. Opacity transitions on hover/focus.

Colors

Class	Description
`.alert-info`	Blue background and text for informational messages.
`.alert-success`	Green background and text for success messages.
`.alert-warning`	Yellow background and text for warning messages.
`.alert-danger`	Red background and text for error/danger messages.