Alert

Display user notifications, actions, and alerts

The alert is a simple colored block used for displaying onscreen notifications or actions. Get started by using the alert class on a div tag.

<div class="alert">
  <h4>This is an alert</h4>
  <a href="#">You better do this thing</a>
</div>
Copy

Style

Colors

You can use the color palette to color your alerts by prefixing the name of a color with is-* . For example to use the primary color you would add the is-primary modifier to the alert.

<div class="alert is-primary">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-danger">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-warning">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-success">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-info">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>
</> Show code
Copy

Outline

The is-outline modifier can be used if you do not want an alert with a block color background. This modifier must always be used with the color palette modifier.

<div class="alert is-primary is-outline">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-danger is-outline">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-warning is-outline">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-success is-outline">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-info is-outline">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>
</> Show code
Copy

Closable

To make a closable alert you can make use of the close button element in the button module. Just add a button--close element to the alert and it will automatically position in the top right corner.

<div class="alert">
  <h4>This is an alert</h4>
  <span>Click the little cross to close me</span>
  <a class="button--close" onclick="this.closest('.alert').remove()"></a>
</div>

<div class="alert is-primary">
  <h4>This is an alert</h4>
  <span>Click the little cross to close me</span>
  <a class="button--close has-no-background" onclick="this.closest('.alert').remove()"></a>
</div>

<div class="alert is-primary is-outline">
  <h4>This is an alert</h4>
  <span>Click the little cross to close me</span>
  <a class="button--close has-no-background" onclick="this.closest('.alert').remove()"></a>
</div>
Copy

CSS variables

You can customize the style of alerts using the following CSS variables.

.alert {
  --border-color: hsl(0deg, 0%, 4%, 0.25);
  --border-style: solid;
  --border-width: 1px;
  --padding: 1rem;
  --background-color: var(--color-white);
  --font-color: var(--color-black);
}
Copy

Create additional themed alerts by updating the background, font & border variables.

.alert.is-orange {
  --background-color: #e28945;
  --border-color: transparent;
  --font-color: #ffffff;
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.