A badge is displayed on the top-right of the holder element. The holder element can be anything.

Note: Because the badge'scss: positionis'absolute', the holder element'scss: positionmust not be'static'.


    <button class="z-btn default">
        Button
        <span class="z-badge">8</span>
    </button>
    <button class="z-btn default">
        Button
        <span class="z-badge green">0</span>
    </button>
    <button class="z-btn default">
        Button
        <span class="z-badge red">20</span>
    </button>
    <button class="z-btn default">
        Button
        <span class="z-badge teal">888</span>
    </button>
    <button class="z-btn default">
        Button
        <span class="z-badge yellow">3</span>
    </button>
    <button class="z-btn default">
        Button
        <span class="z-badge purple">36</span>
    </button>

Badge