Table of contents

Badge

Use badge component to create a counter marker or small label.

About

Added in 4.2.5

Sometimes it is necessary somehow to note the number of certain elements on the button or another element. In Metro UI for this purpose, there is a special component badge. To create badge you must add <span> with class .badge to the element.


                    <button class="button">
                        <span class="ml-1">My Cart</span>
                        <span class="badge">4</span>
                    </button>
                

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Badges can be used as part of links, buttons or others element to provide a counter or a small label.

My Cart 4
My cart 4

                    <button class="button">
                        <span class="ml-1">My Cart</span>
                        <span class="badge">4</span>
                    </button>
                    <a href="#" class="pr-2 pos-relative">
                        <span class="ml-1">My Cart</span>
                        <span class="badge">4</span>
                    </a>
                    <h5 class="d-inline pos-relative ml-4 pr-4">
                        My cart
                        <span class="badge">4</span>
                    </h5>
                

Important! Parent element must have must have a position property other than static.

Badge position

Badge can have three positions inside the parent element: default, inside, inline. Inside and inline positions are specified by the corresponding classes .inside, .inline.

default
inside
inline

                    <button class="button m-1">
                        <span class="mif-cart"></span>
                        <span class="ml-1">My Cart</span>
                        <span class="badge bg-green fg-white">4</span>
                    </button>

                    <button class="button m-1">
                        <span class="mif-cart"></span>
                        <span class="ml-1 mr-2">My Cart</span>
                        <span class="badge inside bg-pink fg-white">4</span>
                    </button>

                    <button class="button m-1">
                        <span class="ml-1">My Cart</span>
                        <span class="badge inline bg-red fg-white">4</span>
                    </button>
                

For the next element default position is a inside: .brand, .app-bar-item, .app-bar-menu > li > a, .h-menu > li > a, .d-menu > li > a, .v-menu > li > a, .t-menu > li > a.

Badge styling

You can change default color style of badge with Metro UI color classes.


                    <button class="button m-1">
                        <span class="mif-cart"></span>
                        <span class="ml-1">My Cart</span>
                        <span class="badge bg-red fg-white">4</span>
                    </button>
                    <button class="button m-1">
                        <span class="mif-cart"></span>
                        <span class="ml-1">My Cart</span>
                        <span class="badge bg-green fg-white">4</span>
                    </button>
                    <button class="button m-1">
                        <span class="mif-cart"></span>
                        <span class="ml-1">My Cart</span>
                        <span class="badge bg-blue fg-white">4</span>
                    </button>
                

Badge examples

Below you can see examples of using badge in different Metro UI components.


                    <div class="app-bar pos-relative z-dropdown" data-role="appbar" data-expand-point="md">
                        <a href="#" class="brand no-hover">
                            Home
                        </a>

                        <ul class="app-bar-menu">
                            <li><a href="#">Home</a></li>
                            <li>
                                <a href="#" class="dropdown-toggle">Products</a>
                                <ul class="d-menu" data-role="dropdown">
                                    <li><a href="#">Windows 10</a></li>
                                    <li><a href="#">Office 365</a></li>
                                    <li class="divider bg-lightGray"></li>
                                    <li><a href="#">Skype</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contacts</a></li>
                            <li>
                                <a href="#">Cart <span class="badge bg-red fg-white">4</span></a>
                            </li>
                        </ul>
                        <a href="#" class="app-bar-item ml-auto">
                            <span class="mif-cart"></span>
                            <span class="badge bg-red fg-white">4</span>
                        </a>
                    </div>
                

                    <ul class="h-menu mt-4">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Cart <span class="badge">4</span></a></li>
                    </ul>
                

                    <ul class="t-menu horizontal compact">
                        <li><a href="#"><span class="icon mif-home"></span></a></li>
                        <li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
                            <ul class="t-menu compact" data-role="dropdown">
                                <li><a href="#"><span class="icon mif-home"></span></a></li>
                                <li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
                                    <ul class="t-menu compact horizontal" data-role="dropdown">
                                        <li><a href="#"><span class="icon mif-home"></span></a></li>
                                        <li><a href="#"><span class="icon mif-compass"></span></a></li>
                                        <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                                        <li><a href="#"><span class="icon mif-file-empty"></span></a></li>
                                    </ul>
                                </li>
                                <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                                <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><span class="icon mif-bubbles"></span></a></li>
                        <li><a href="#"><span class="icon mif-cart"></span><span class="badge bg-transparent">4</span> </a></li>
                    </ul>
                

                    <ul class="d-menu">
                        <li><a href="#"><span class="mif-user icon"></span> Profile</a></li>
                        <li><a href="#">Calendar</a></li>
                        <li><a href="#">Photo <span class="badge inline bg-cyan fg-white">10</span> </a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="mif-target icon"></span> Location</a></li>
                    </ul>
                

                    <button class="button m-1">
                        <span class="mif-cart"></span>
                        <span class="ml-1">My Cart</span>
                        <span class="badge bg-red fg-white">4</span>
                    </button>
                    <button class="button square m-1">
                        <span class="mif-cart"></span>
                        <span class="badge bg-red fg-white">4</span>
                    </button>
                    <button class="image-button m-1">
                        <span class="mif-share icon"></span>
                        <span class="caption">Share it</span>
                        <span class="badge bg-red fg-white">4</span>
                    </button>