Badge

    @import url("https://openui.netlify.app/pages/components/Badge/badge.css");
    <link rel="stylesheet" 
    href="https://openui.netlify.app/pages/components/Badge/badge.css">
            

Avatars with Badge

9

3

8

The badge component can be used in two ways with and without the count.

    <figure class="avatar avatar-xl badge">
        <img src="..." alt=""/>
        <div class="badge-count">8</div>
    </figure>
    
    <figure class="avatar avatar-std badge">
        <img src="..." alt=""/>
        <div class="badge-count">8</div>
    </figure>
            

Icons with Badge

8

8

The badge component can be used with and without the badge count

    <figure class="badge">
        <img src="..." alt="" />
        <div class="badge-count">8</div>
    </figure>

    <figure class="badge">
        <img src="..." alt="" />
        <div class="badge-count">8</div>
    </figure>