Advanced Badges

Documentation and examples for badges, our small count and labeling component.

Polygon badges

Add any preset modifier classes to change the appearance of a badge.

import React from 'react';
import { Accordion } from 'react-bootstrap';

const PolygonBadges = () => {
  return (
    <>
        <div className="badge-icon badge-icon-lg  text-warning">
            <div className="badge-icon-wrap">
                <i className="ri-flashlight-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" className="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z" /><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor" /></g></svg>
        </div>
        <div className="badge-icon badge-icon-md text-light">
            <div className="badge-icon-wrap">
                <i className="ri-spy-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" className="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z" /><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor" /></g></svg>
        </div>
        <div className="badge-icon text-dark">
            <div className="badge-icon-wrap">
                <i className="ri-vip-crown-2-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" className="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z" /><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor" /></g></svg>
        </div>
        <div className="badge-icon badge-icon-sm  text-blue">
            <div className="badge-icon-wrap">
                <i className="ri-vip-diamond-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" className="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z" /><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor" /></g></svg>
        </div>
        <div className="badge-icon badge-icon-xs  text-pink">
            <div className="badge-icon-wrap">
                <i className="ri-rocket-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" className="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z" /><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor" /></g></svg>
        </div>
        <div className="badge-icon badge-icon-xxs  text-teal">
            <div className="badge-icon-wrap">
                <i className="ri-rocket-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" className="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z" /><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor" /></g></svg>
        </div>
    </>
  );
}

export default PolygonBadges;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="badge-icon badge-icon-[value]"`	lg / md / sm / xs / xxs
`className="badge-icon text-[value]"`	primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Circular badges

Add any preset modifier classes to change the appearance of a badge.

Preview

Jsx

Classes

import React from 'react';
import { Accordion } from 'react-bootstrap';

const CircularBadges = () => {
  return (
    <>
        <div className="badge-icon badge-circle badge-icon-lg  text-warning">
            <div className="badge-icon-wrap">
                <i className="ri-flashlight-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
                <g data-name="Ellipse 302" transform="translate(8 8)" strokeWidth={3}>
                    <circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor" />
                    <circle cx="55.5" cy="55.5" r="59.5" fill="currentColor" />
                </g>
            </svg>
        </div>
        <div className="badge-icon badge-circle badge-icon-md text-light">
            <div className="badge-icon-wrap">
                <i className="ri-spy-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
                <g data-name="Ellipse 302" transform="translate(8 8)" strokeWidth={3}>
                    <circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor" />
                    <circle cx="55.5" cy="55.5" r="59.5" fill="currentColor" />
                </g>
            </svg>
        </div>
        <div className="badge-icon badge-circle text-dark">
            <div className="badge-icon-wrap">
                <i className="ri-vip-crown-2-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
                <g data-name="Ellipse 302" transform="translate(8 8)" strokeWidth={3}>
                    <circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor" />
                    <circle cx="55.5" cy="55.5" r="59.5" fill="currentColor" />
                </g>
            </svg>
        </div>
        <div className="badge-icon badge-circle badge-icon-sm  text-blue">
            <div className="badge-icon-wrap">
                <i className="ri-vip-diamond-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
                <g data-name="Ellipse 302" transform="translate(8 8)" strokeWidth={3}>
                    <circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor" />
                    <circle cx="55.5" cy="55.5" r="59.5" fill="currentColor" />
                </g>
            </svg>
        </div>
        <div className="badge-icon badge-circle badge-icon-xs  text-pink">
            <div className="badge-icon-wrap">
                <i className="ri-rocket-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
                <g data-name="Ellipse 302" transform="translate(8 8)" strokeWidth={3}>
                    <circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor" />
                    <circle cx="55.5" cy="55.5" r="59.5" fill="currentColor" />
                </g>
            </svg>
        </div>
        <div className="badge-icon badge-circle badge-icon-xxs  text-teal">
            <div className="badge-icon-wrap">
                <i className="ri-rocket-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
                <g data-name="Ellipse 302" transform="translate(8 8)" strokeWidth={3}>
                    <circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor" />
                    <circle cx="55.5" cy="55.5" r="59.5" fill="currentColor" />
                </g>
            </svg>
        </div>
    </>
  );
}

export default CircularBadges;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="badge-icon badge-circle badge-icon-[value]"`	lg / md / sm / xs / xxs
`className="badge-icon badge-circle text-[value]"`	primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Badges on badge

.position-bottom-end-overflow-1 .position-top-end-overflow-1

Preview

Jsx

Classes

import React from 'react';
import { Accordion } from 'react-bootstrap';

const BadgesOnBadge = () => {
  return (
    <>
        <div className="badge-icon text-pink position-relative">
            <div className="badge-icon-wrap">
                <i className="ri-fire-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141 154.246">
                <g transform="translate(-79 -802.684)">
                    <path d="M105.432,0a30,30,0,0,1,25.949,14.945l23.5,40.5a30,30,0,0,1,0,30.11l-23.5,40.5A30,30,0,0,1,105.432,141H58.181a30,30,0,0,1-25.949-14.945l-23.5-40.5a30,30,0,0,1,0-30.11l23.5-40.5A30,30,0,0,1,58.181,0Z" transform="translate(79 961.613) rotate(-90)" fill="currentColor" />
                    <path d="M87.334,0a15,15,0,0,1,12.995,7.508l23.351,40.5a15,15,0,0,1,0,14.985l-23.351,40.5A15,15,0,0,1,87.334,111H40.666a15,15,0,0,1-12.995-7.508L4.32,62.992a15,15,0,0,1,0-14.985l23.351-40.5A15,15,0,0,1,40.666,0Z" transform="translate(94 944) rotate(-90)" fill="currentColor" />
                </g>
            </svg>
            <div className="badge-icon badge-icon-xxs text-yellow  position-top-end-overflow-1">
                <div className="badge-icon-wrap">
                    <i className="ri-vip-diamond-fill" />
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width={139} height={139} viewBox="0 0 139 139" fill="none">
                    <path d="M69.5 130C102.913 130 130 102.913 130 69.5C130 36.0868 102.913 9 69.5 9C36.0868 9 9 36.0868 9 69.5C9 102.913 36.0868 130 69.5 130Z" fill="black" stroke="white" strokeWidth={10} />
                    <path d="M69.5 134C105.122 134 134 105.122 134 69.5C134 33.8776 105.122 5 69.5 5C33.8776 5 5 33.8776 5 69.5C5 105.122 33.8776 134 69.5 134Z" fill="currentColor" stroke="white" strokeWidth={10} />
                </svg>
            </div>
        </div>
        <div className="badge-icon text-pink position-relative">
            <div className="badge-icon-wrap">
                <i className="ri-fire-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141 154.246">
                <g transform="translate(-79 -802.684)">
                    <path d="M105.432,0a30,30,0,0,1,25.949,14.945l23.5,40.5a30,30,0,0,1,0,30.11l-23.5,40.5A30,30,0,0,1,105.432,141H58.181a30,30,0,0,1-25.949-14.945l-23.5-40.5a30,30,0,0,1,0-30.11l23.5-40.5A30,30,0,0,1,58.181,0Z" transform="translate(79 961.613) rotate(-90)" fill="currentColor" />
                    <path d="M87.334,0a15,15,0,0,1,12.995,7.508l23.351,40.5a15,15,0,0,1,0,14.985l-23.351,40.5A15,15,0,0,1,87.334,111H40.666a15,15,0,0,1-12.995-7.508L4.32,62.992a15,15,0,0,1,0-14.985l23.351-40.5A15,15,0,0,1,40.666,0Z" transform="translate(94 944) rotate(-90)" fill="currentColor" />
                </g>
            </svg>
            <div className="badge-icon badge-icon-xxs text-yellow  position-bottom-end-overflow-1">
                <div className="badge-icon-wrap">
                    <i className="ri-vip-diamond-fill" />
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width={139} height={139} viewBox="0 0 139 139" fill="none">
                    <path d="M69.5 130C102.913 130 130 102.913 130 69.5C130 36.0868 102.913 9 69.5 9C36.0868 9 9 36.0868 9 69.5C9 102.913 36.0868 130 69.5 130Z" fill="black" stroke="white" strokeWidth={10} />
                    <path d="M69.5 134C105.122 134 134 105.122 134 69.5C134 33.8776 105.122 5 69.5 5C33.8776 5 5 33.8776 5 69.5C5 105.122 33.8776 134 69.5 134Z" fill="currentColor" stroke="white" strokeWidth={10} />
                </svg>
            </div>
        </div>
        <div className="badge-icon text-pink position-relative">
            <div className="badge-icon-wrap">
                <i className="ri-fire-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
                <g data-name="Ellipse 302" transform="translate(8 8)" strokeWidth={3}>
                    <circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor" />
                    <circle cx="55.5" cy="55.5" r="59.5" fill="currentColor" />
                </g>
            </svg>
            <div className="badge-icon badge-icon-xxs text-yellow  position-top-end-overflow-1">
                <div className="badge-icon-wrap">
                    <i className="ri-vip-diamond-fill" />
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width={139} height={139} viewBox="0 0 139 139" fill="none">
                    <path d="M69.5 130C102.913 130 130 102.913 130 69.5C130 36.0868 102.913 9 69.5 9C36.0868 9 9 36.0868 9 69.5C9 102.913 36.0868 130 69.5 130Z" fill="black" stroke="white" strokeWidth={10} />
                    <path d="M69.5 134C105.122 134 134 105.122 134 69.5C134 33.8776 105.122 5 69.5 5C33.8776 5 5 33.8776 5 69.5C5 105.122 33.8776 134 69.5 134Z" fill="currentColor" stroke="white" strokeWidth={10} />
                </svg>
            </div>
        </div>
        <div className="badge-icon text-pink position-relative">
            <div className="badge-icon-wrap">
                <i className="ri-fire-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
                <g data-name="Ellipse 302" transform="translate(8 8)" strokeWidth={3}>
                    <circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor" />
                    <circle cx="55.5" cy="55.5" r="59.5" fill="currentColor" />
                </g>
            </svg>
            <div className="badge-icon badge-icon-xxs text-yellow  position-bottom-end-overflow-1">
                <div className="badge-icon-wrap">
                    <i className="ri-vip-diamond-fill" />
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width={139} height={139} viewBox="0 0 139 139" fill="none">
                    <path d="M69.5 130C102.913 130 130 102.913 130 69.5C130 36.0868 102.913 9 69.5 9C36.0868 9 9 36.0868 9 69.5C9 102.913 36.0868 130 69.5 130Z" fill="black" stroke="white" strokeWidth={10} />
                    <path d="M69.5 134C105.122 134 134 105.122 134 69.5C134 33.8776 105.122 5 69.5 5C33.8776 5 5 33.8776 5 69.5C5 105.122 33.8776 134 69.5 134Z" fill="currentColor" stroke="white" strokeWidth={10} />
                </svg>
            </div>
        </div>
    </>
  );
}

export default BadgesOnBadge;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="badge-icon badge-icon-xs position-[value]-overflow-1"`	top-end / bottom-end

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Badges level

Use .badge-level modifier class.

Preview

Jsx

import React from 'react';
import { Accordion } from 'react-bootstrap';

const BadgesLevel = () => {
  return (
    <>
        <div className="badge-icon badge-icon-lg text-yellow badge-level">
            <div className="badge-icon-wrap">
                <i className="ri-fire-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" className="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z" /><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor" /></g></svg>
            <span title={1}>1</span>
        </div>
        <div className="badge-icon badge-circle badge-icon-md text-yellow badge-level">
            <div className="badge-icon-wrap">
                <i className="ri-fire-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
                <g data-name="Ellipse 302" transform="translate(8 8)" strokeWidth={3}>
                    <circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor" />
                    <circle cx="55.5" cy="55.5" r="59.5" fill="currentColor" />
                </g>
            </svg>
            <span title={2}>2</span>
        </div>
        <div className="badge-icon text-yellow badge-level">
            <div className="badge-icon-wrap">
                <i className="ri-fire-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" className="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z" /><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor" /></g></svg>
            <span title={3}>3</span>
        </div>
        <div className="badge-icon badge-circle badge-icon-sm text-yellow badge-level">
            <div className="badge-icon-wrap">
                <i className="ri-fire-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
                <g data-name="Ellipse 302" transform="translate(8 8)" strokeWidth={3}>
                    <circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor" />
                    <circle cx="55.5" cy="55.5" r="59.5" fill="currentColor" />
                </g>
            </svg>
            <span title={4}>4</span>
        </div>
        <div className="badge-icon badge-icon-xs badge-level text-yellow">
            <div className="badge-icon-wrap">
                <i className="ri-fire-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" className="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z" /><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor" /></g></svg>
            <span title={5}>5</span>
        </div>
        <div className="badge-icon badge-circle badge-icon-xxs badge-level  text-yellow">
            <div className="badge-icon-wrap">
                <i className="ri-fire-fill" />
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
                <g data-name="Ellipse 302" transform="translate(8 8)" strokeWidth={3}>
                    <circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor" />
                    <circle cx="55.5" cy="55.5" r="59.5" fill="currentColor" />
                </g>
            </svg>
            <span title={6}>6</span>
        </div>
    </>
  );
}

export default BadgesLevel;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Avatar Badges

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Preview

Jsx

import React from 'react';
import { Accordion } from 'react-bootstrap';

const BadgesLevel = () => {
  return (
    <>
        <div className="avatar  position-relative">
            <img src={avatar} alt="user" className="avatar-img" />
            <div className="badge-icon badge-icon-xxs text-blue position-bottom-end-overflow">
                <div className="badge-icon-wrap">
                    <i className="ri-flashlight-fill" />
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width={161} height={176} viewBox="0 0 161 176" fill="none">
                    <path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" strokeWidth={10} />
                </svg>
            </div>
        </div>
        <div className="avatar  position-relative">
            <img src={avatar} alt="user" className="avatar-img" />
            <div className="badge-icon badge-icon-xxs text-blue position-top-end-overflow">
                <div className="badge-icon-wrap">
                    <i className="ri-flashlight-fill" />
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width={161} height={176} viewBox="0 0 161 176" fill="none">
                    <path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" strokeWidth={10} />
                </svg>
            </div>
        </div>
        <div className="avatar  position-relative avatar-rounded">
            <img src={avatar} alt="user" className="avatar-img" />
            <div className="badge-icon badge-icon-xxs text-blue position-bottom-end-overflow-1">
                <div className="badge-icon-wrap">
                    <i className="ri-flashlight-fill" />
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width={161} height={176} viewBox="0 0 161 176" fill="none">
                    <path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" strokeWidth={10} />
                </svg>
            </div>
        </div>
        <div className="avatar  position-relative avatar-rounded">
            <img src={avatar} alt="user" className="avatar-img" />
            <div className="badge-icon badge-icon-xxs text-blue position-top-end-overflow-1">
                <div className="badge-icon-wrap">
                    <i className="ri-flashlight-fill" />
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width={161} height={176} viewBox="0 0 161 176" fill="none">
                    <path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" strokeWidth={10} />
                </svg>
            </div>
        </div>
        <div className="avatar avatar-soft-primary  position-relative avatar-rounded">
            <span className="initial-wrap">PR</span>
            <div className="badge-icon badge-icon-xxs text-blue position-bottom-end-overflow-1">
                <div className="badge-icon-wrap">
                    <i className="ri-flashlight-fill" />
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width={161} height={176} viewBox="0 0 161 176" fill="none">
                    <path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" strokeWidth={10} />
                </svg>
            </div>
        </div>
        <div className="avatar avatar-soft-primary  position-relative avatar-rounded">
            <span className="initial-wrap">PR</span>
            <div className="badge-icon badge-icon-xxs text-blue position-top-end-overflow-1">
                <div className="badge-icon-wrap">
                    <i className="ri-flashlight-fill" />
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width={161} height={176} viewBox="0 0 161 176" fill="none">
                    <path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" strokeWidth={10} />
                </svg>
            </div>
        </div>
    </>
  );
}

export default BadgesLevel;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Polygon badges
Circular badges
Badges on badge
Badges level
Avatar Badges