Alerts

Alerts provide contextual feedback messages for common user actions. They can display success, warning, error, or informational states using flexible styles.

Class Name	Type	Description
alert	Component	Alert
alert-primary	Color	Primary color
alert-secondary	Color	Secondary color
alert-info	Color	Info color
alert-success	Color	Success color
alert-warning	Color	Warning color
alert-danger	Color	Danger color
alert-neutral	Color	Neutral color
alert-subtle	Style	Subtle style
alert-outline	Style	Outline style

Subtle variant

Simple alerts use a subtle background with clear text color.

A simple neutral subtle alert!

A simple primary subtle alert!

A simple secondary subtle alert!

A simple info subtle alert!

A simple success subtle alert!

A simple warning subtle alert!

A simple error subtle alert!

HTML

<div class="alert alert-subtle" role="alert">A simple neutral subtle alert!</div>
<div class="alert alert-subtle-primary" role="alert">A simple primary subtle alert!</div>
<div class="alert alert-subtle-secondary" role="alert">A simple secondary subtle alert!</div>
<div class="alert alert-subtle-info" role="alert">A simple info subtle alert!</div>
<div class="alert alert-subtle-success" role="alert">A simple success subtle alert!</div>
<div class="alert alert-subtle-warning" role="alert">A simple warning subtle alert!</div>
<div class="alert alert-subtle-danger" role="alert">A simple error subtle alert!</div>

Contained variant

Contained alerts use a solid background color to clearly convey the type of message, such as success, warning, error, or information.

A simple neutral alert!

A simple primary alert!

A simple secondary alert!

A simple info alert!

A simple success alert!

A simple warning alert!

A simple error alert!

HTML

<div class="alert" role="alert">A simple neutral alert!</div>
<div class="alert alert-primary" role="alert">A simple primary alert!</div>
<div class="alert alert-secondary" role="alert">A simple secondary alert!</div>
<div class="alert alert-info" role="alert">A simple info alert!</div>
<div class="alert alert-success" role="alert">A simple success alert!</div>
<div class="alert alert-warning" role="alert">A simple warning alert!</div>
<div class="alert alert-danger" role="alert">A simple error alert!</div>

Outlined variant

Outlined alerts use a border and transparent background to provide medium emphasis. They are useful when you want feedback messages to be visible without dominating the interface.

A simple neutral outline alert!

A simple primary outline alert!

A simple secondary outline alert!

A simple info outline alert!

A simple success outline alert!

A simple warning outline alert!

A simple error outline alert!

HTML

<div class="alert alert-outline" role="alert">A simple neutral outline alert!</div>
<div class="alert alert-outline-primary" role="alert">A simple primary outline alert!</div>
<div class="alert alert-outline-secondary" role="alert">A simple secondary outline alert!</div>
<div class="alert alert-outline-info" role="alert">A simple info outline alert!</div>
<div class="alert alert-outline-success" role="alert">A simple success outline alert!</div>
<div class="alert alert-outline-warning" role="alert">A simple warning outline alert!</div>
<div class="alert alert-outline-danger" role="alert">A simple error outline alert!</div>

Alert with Icon

Alerts can include icons to improve clarity and recognition. Icons provide a quick visual cue about the alert type, such as success, information, or error.

Operation successful — everything is up to date!

Note the following — changes have been saved.

Something went wrong — please try again later.

Operation successful — everything is up to date!

Note the following — changes have been saved.

Something went wrong — please try again later.

Operation successful — everything is up to date!

Note the following — changes have been saved.

Something went wrong — please try again later.

HTML

<div class="alert alert-success" role="alert">
  <span class="icon-[material-symbols--check-circle-outline] alert-icon"></span>
  <span>Operation successful — everything is up to date!</span>
</div>
<div class="alert alert-info" role="alert">
  <span class="icon-[material-symbols--info-outline] alert-icon"></span>
  <span>Note the following — changes have been saved.</span>
</div>
<div class="alert alert-danger" role="alert">
  <span class="icon-[material-symbols--error-outline-rounded] alert-icon"></span>
  <span>Something went wrong — please try again later.</span>
</div>
<div class="alert alert-subtle-success" role="alert">
  <span class="icon-[material-symbols--check-circle-outline] alert-icon"></span>
  <span>Operation successful — everything is up to date!</span>
</div>
<div class="alert alert-subtle-info" role="alert">
  <span class="icon-[material-symbols--info-outline] alert-icon"></span>
  <span>Note the following — changes have been saved.</span>
</div>
<div class="alert alert-subtle-danger" role="alert">
  <span class="icon-[material-symbols--error-outline-rounded] alert-icon"></span>
  <span>Something went wrong — please try again later.</span>
</div>
<div class="alert alert-outline-success" role="alert">
  <span class="icon-[material-symbols--check-circle-outline] alert-icon"></span>
  <span>Operation successful — everything is up to date!</span>
</div>
<div class="alert alert-outline-info" role="alert">
  <span class="icon-[material-symbols--info-outline] alert-icon"></span>
  <span>Note the following — changes have been saved.</span>
</div>
<div class="alert alert-outline-danger" role="alert">
  <span class="icon-[material-symbols--error-outline-rounded] alert-icon"></span>
  <span>Something went wrong — please try again later.</span>
</div>

Alert with title

Alerts can also include headings, paragraphs, and dividers to provide more context or structure within the message.

Warning

Please be cautious — review your actions.

HTML

<div class="alert alert-subtle-warning items-start" role="alert">
  <span class="icon-[material-symbols--warning-outline-rounded] alert-icon"></span>
  <div>
    <h6 class='font-medium'>Warning</h6>
    <span>Please be cautious — review your actions.</span>
  </div>
</div>

Alert Actions

This example demonstrates various alert components with actionable buttons.

Each alert displays a relevant icon and message.
Buttons provide users with options such as closing the alert, continuing, or retrying an action.

Alert Actions

This is a generic alert — please take note.

This is a success alert — you can continue.

Error occurs - Try again.

HTML

<div class="alert alert-subtle-warning" role="alert">
  <span class="icon-[material-symbols--warning-outline-rounded] alert-icon"></span>
  <span>This is a generic alert — please take note.</span>
  <button class='btn btn-icon btn-icon-warning ms-auto shrink-0'>
    <span class='icon-[material-symbols--close-rounded] text-base'></span>
  </button>
</div>
<div class="alert alert-outline-success" role="alert">
  <span class="icon-[material-symbols--check-circle-outline] alert-icon"></span>
  <span>This is a success alert — you can continue.</span>
  <button class='btn btn-sm btn-success ms-auto shrink-0'>Continue</button>
</div>
<div class="alert alert-danger" role="alert">
  <span class="icon-[material-symbols--error-outline-rounded] alert-icon"></span>
  <span>Error occurs - Try again.</span>
  <button class='btn btn-sm btn-text-danger text-contrast hover:bg-danger-dark ms-auto'>Start</button>
</div>

Dismissing

Using the alert JavaScript plugin that uses the Bootstrap Button plugin, it’s possible to dismiss any alert inline. Here’s how:

Be sure you’ve loaded the alert plugin, or the compiled Hummingbird JavaScript.
Add a close button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the close button.
On the close button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.
To animate alerts when dismissing them, be sure to add the .fade and .show classes. You can see this in action with a live demo:

Holy guacamole! You should check in on some of those fields below.

HTML

<div class="alert alert-subtle-warning fade show" role="alert">
  <p class='mb-0'><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
  <button type="button" class="btn btn-icon btn-icon-warning ms-auto" data-bs-dismiss="alert" aria-label="Close">
    <span class="icon-[material-symbols--close-rounded] text-base"></span>
  </button>
</div>

CSS variables

The alert component is built using a set of CSS variables. These variables provide flexibility for customizing styles.

.alert {
  --alert-bg: var(--color-main);
  --alert-padding-x: --spacing(4);
  --alert-padding-y: --spacing(3.5);
  --alert-color: var(--color-contrast);
  --alert-border-color: transparent;
  --alert-border-radius: var(--radius-lg);
  --alert-icon-color: var(--color-contrast);
}

JavaScript behavior

Initialize

Initialize elements as alerts

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new hummingbird.Alert(element))

Triggers

Dismissal can be achieved with the data-bs-dismiss attribute on a button within the alert as demonstrated below:

<button type="button" class="btn btn-icon" data-bs-dismiss="alert" aria-label="Close">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-2.9 2.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l2.9-2.9l-2.9-2.875q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l2.9 2.9l2.875-2.9q.275-.275.7-.275t.7.275q.3.3.3.713t-.3.687L13.375 12l2.9 2.9q.275.275.275.7t-.275.7q-.3.3-.712.3t-.688-.3z"/></svg>
</button>

or on a button outside the alert using the additional data-bs-target as demonstrated below:

Note that closing an alert will remove it from the DOM.

Methods

You can create an alert instance with the alert constructor, for example:

const myAlert = new hummingbird.Alert('#myAlert')

This makes an alert listen for click events on descendant elements which have the data-bs-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)

Method	Description
`close`	Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed.
`dispose`	Destroys an element’s alert. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the alert instance associated to a DOM element. For example: `hummingbird.Alert.getInstance(alert)`.
`getOrCreateInstance`	Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `hummingbird.Alert.getOrCreateInstance(element)`.

Basic usage:

const alert = hummingbird.Alert.getOrCreateInstance('#myAlert')
alert.close()

Events

Hummingbird’s alert plugin exposes a few events for hooking into alert functionality.

Event	Description
`close.bs.alert`	Fires immediately when the `close` instance method is called.
`closed.bs.alert`	Fired when the alert has been closed and CSS transitions have completed.

const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn’t get lost/reset to the start of the page
  // document.getElementById('...').focus()
})

hummingbird

Getting Started

Integration guides

Customize

Forms

Components

Alerts

Subtle variant

Contained variant

Outlined variant

Alert with Icon

Alert with title

Warning

Alert Actions

Alert Actions

Dismissing

CSS variables

JavaScript behavior

Initialize

Triggers

Methods

Events