Commentary

The badge element adds number indicators to other elements that wrap the badge. Typically, badges are used to show unread items or outstanding notifications.

A span element is used to display a number. This element also has a role set to "status" and defines a live region containing advisory information for the user. An "aria-label" provides a context for screen readers.

Typical practices for using badges are:

  • For the relevant element, use badges for counts of important information;
  • A dot badge notifies the user that something is new or updated without showing a count, such as an “unread report”, or activity notification. It may be useful as a less prominent badge, even when the count is known.
  • Use badges to notify or draw attention to changed values or status.

Usage

Classes:
.badge Defines a default span element that can receive numerical data. This element is usually wrapped by a parent p, figure or button.
Badge colours: .badge-primary, .badge-secondary, .badge-tertiary, .badge-link, .badge-success, .badge-warning, .badge-danger
.no-border Optional modifier removes border around badge. Typically, used in .navbar or other places that have a strongly coloured background.
.avatar Optional class for a parent figure wrapper to adjust for the shape of an avatar.
.has-icon Optional class for a parent figure wrapper to adjust for the shape of an icon. Icons have a right margin that needs to be taken into account
Dependencies:
File: badge.css
Variables: --bg-main-element, --danger, --grey-dark, --link, --primary, --secondary, --success, --tertiary, --text-darker, --text-invert, --warning

Examples

Basic Badge Attachments

Default

Badge Tertiary 8

Badge Success 88

Badge Warning 888

Badge Danger 8888 


                <p>Default
                    <span class="badge" role="status" aria-label="Example value"></span>
                </p>

                <p>Badge Tertiary
                    <span class="badge-tertiary" role="status" aria-label="Unread messages">8</span>
                </p>

                <p>Badge Success
                    <span class="badge-success" role="status" aria-label="Unread messages">88</span>
                </p>

                <p>Badge Warning
                    <span class="badge-warning" role="status" aria-label="Unread messages">888</span>
                </p>

                <p>Badge Danger
                    <span class="badge-danger" role="status" aria-label="Unread messages">8888</span>
                </p>

Button and Image Badge Attachments

YZ 888
88 

                <button type="button" class="is-secondary">
                    Button Info
                    <span class="badge-link" role="status" aria-label="Unread messages">88</span>
                </button>

                <button type="button" class="is-link">
                    Button Link
                    <span class="badge-danger" role="status" aria-label="Unread messages">888</span>
                </button>

                <figure class="avatar avatar-lg" data-initial="YZ">
                    <img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-woman4.png" alt="YZ">
                    <span class="badge-primary" role="status" aria-label="Notifications">888</span>
                </figure>

                <figure class="has-icon">
                    <span class="icon-bg-bell"></span>
                    <span class="badge-danger" role="status" aria-label="Notifications">88</span>
                </figure>