Notifications, messages, tags, progress

The four elements of this lesson tell the user something: "booking confirmed", "3 seats left", "60% uploaded". A notification is a coloured strip with text, a message is a strip with a header, a tag is a small label and progress is a progress bar. All of them accept the same colour modifiers as buttons.

Notification

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="notification is-success is-light">
  <button class="delete" aria-label="Close"></button>
  A table for 4 guests is booked for Friday, 19:00.
</div>

A light green strip with text and a grey cross in the top right corner. Without is-light the background is a strong green, and Bulma picks a contrasting text colour.

The cross closes nothing by itself — you need a handler:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="notification is-warning">
  <button class="delete" aria-label="Close"></button>
  The kitchen closes in 30 minutes.
</div>
 
<script>
  document.querySelectorAll('.notification .delete').forEach((button) => {
    button.addEventListener('click', () => button.parentElement.remove());
  });
</script>

Click the cross and the yellow strip disappears: the script removes the button's parent, which is the notification itself.

Message

A message is a block with a coloured message-header and a message-body. It suits explanations that should stay on the page:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<article class="message is-info">
  <div class="message-header">
    <p>Allergens</p>
  </div>
  <div class="message-body">
    Dishes with nuts are marked in the menu. Tell your waiter if you have an allergy.
  </div>
</article>

A blue header and a light blue body with dark text. You can leave the header out, and only the body with a coloured stripe on the left remains.

Tags

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="tags">
  <span class="tag is-success">Vegetarian</span>
  <span class="tag is-danger is-light">Spicy</span>
  <span class="tag is-warning is-rounded">New</span>
</div>
 
<div class="tags has-addons">
  <span class="tag is-dark">Status</span>
  <span class="tag is-info">Cooking</span>
</div>

The first line is three tags of different colours with gaps: the tags wrapper lines them up. The second is two tags joined into one "Status | Cooking" label — this is how the orders table shows a status. The is-medium and is-large modifiers make a tag bigger, and a <button class="delete is-small"> inside it adds a cross.

Progress

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<progress class="progress is-primary" value="60" max="100">60%</progress>
<progress class="progress is-small is-info" max="100">Loading</progress>

The first bar is 60% full. The second has no value attribute, so an animation runs along it — this is how you show loading of unknown duration. The text inside the tag is seen only by old browsers and screen readers.

Common mistake

Using a notification for a hint that must always be visible and giving it a cross. The guest closes the strip and loses important information. Use a notification with a delete button for temporary messages and a message without one for permanent explanations.

Thanks for reading!