Skip to main content

Alerts / Notificacions

Components for alerts and notifications with various styles and colors.

Default alerts​

This is a default alert / notification!

This is a primary alert / notification!

This is a secondary alert / notification!

This is a tertiary alert / notification!

This is a dangder alert / notification!

This is a warning alert / notification!

This is a success alert / notification!

This is an info alert / notification!

Other classes: primary, secondary, tertiary, danger, warning. success, and info.

<div class="alert is-primary">
  <p>...</p>
</div>

Alerts with icons​

This is a default alert with icon / notification!

This is a primary alert with icon / notification!

This is a secondary alert with icon / notification!

This is a tertiary alert with icon / notification!

This is a danger alert with icon / notification!

This is a warning alert with icon / notification!

This is a success alert with icon / notification!

This is an info alert with icon / notification!

<div class="alert is-primary">
  <span class="icon">
    <icon />
  </span>
  <p>...</p>
</div>

Alerts with left border​

This is a primary alert with left border / notification!

This is a danger alert with left border / notification!

<div class="alert has-left-border">
      ...
    </div>

Examples is-flat or is-full-rounded​

Just add the class flat.

<div class="alert is-primary is-flat">
  <p>This is an info alert / notification!</p>
</div>

Just add the class full-rounded.

<div class="alert is-primary is-full-rounded">
  <p>This is an info alert / notification!</p>
</div>

Examples with close button​

Alert / notification with close button.

Alert / notification with close button.

Alert / notification with close button.

<div class="alert is-primary is-flat">
  <p>Alert / notification with close button.</p>
  <span class="close-alert"><XMarkIcon/></span>
</div>

Right button option​

Alert / notification with close button.

This works for all other classes.

<div class="alert is-primary">
  ...
  <button type="button" class="close-button">
    <icon />
  </button>
</div>

Semi transparent alerts / notifications​

Alert / notification with close button.

Alert / notification with close button.

Alert / notification with close button.

Just need to add the is-semi-transparent class nest to the alert class.