<span class="badge text-bg-primary py-1 px-2 text-white rounded-1 fw-semibold fs-12">اولیه</span>
<span class="badge text-bg-secondary py-1 px-2 text-white rounded-1 fw-semibold fs-12">ثانوی</span>
<span class="badge text-bg-success py-1 px-2 text-white rounded-1 fw-semibold fs-12">موفقیت</span>
<span class="badge text-bg-danger py-1 px-2 text-white rounded-1 fw-semibold fs-12">خطر</span>
<span class="badge text-bg-warning py-1 px-2 text-white rounded-1 fw-semibold fs-12">هشدار</span>
<span class="badge text-bg-info py-1 px-2 text-white rounded-1 fw-semibold fs-12">اطلاعات</span>
<span class="badge text-bg-light py-1 px-2 text-white rounded-1 fw-semibold fs-12">روشن</span>
<span class="badge text-bg-dark py-1 px-2 text-white rounded-1 fw-semibold fs-12">تاریک</span>

<span class="badge bg-opacity-10 bg-primary py-1 px-2 text-primary rounded-1 fw-semibold fs-12">اولیه</span>
<span class="badge bg-opacity-10 bg-secondary py-1 px-2 text-secondary rounded-1 fw-semibold fs-12">ثانوی</span>
<span class="badge bg-opacity-10 bg-success py-1 px-2 text-success rounded-1 fw-semibold fs-12">موفقیت</span>
<span class="badge bg-opacity-10 bg-danger py-1 px-2 text-danger rounded-1 fw-semibold fs-12">خطر</span>
<span class="badge bg-opacity-10 bg-warning py-1 px-2 text-warning rounded-1 fw-semibold fs-12">هشدار</span>
<span class="badge bg-opacity-10 bg-info py-1 px-2 text-info rounded-1 fw-semibold fs-12">اطلاعات</span>
<span class="badge bg-opacity-10 bg-light py-1 px-2 text-light rounded-1 fw-semibold fs-12">روشن</span>
<span class="badge bg-opacity-10 bg-dark py-1 px-2 text-dark rounded-1 fw-semibold fs-12">تاریک</span>

<button type="button" class="btn bg-primary bg-opacity-10 fw-semibold text-primary py-2 px-4 mt-2 me-2">اولیه</button>
<button type="button" class="btn bg-secondary bg-opacity-10 fw-semibold text-secondary py-2 px-4 mt-2 me-2">ثانوی</button>
<button type="button" class="btn bg-success bg-opacity-10 fw-semibold text-success py-2 px-4 mt-2 me-2">موفقیت</button>
<button type="button" class="btn bg-danger bg-opacity-10 fw-semibold text-danger py-2 px-4 mt-2 me-2">خطر</button>
<button type="button" class="btn bg-warning bg-opacity-10 fw-semibold text-warning py-2 px-4 mt-2 me-2">هشدار</button>
<button type="button" class="btn bg-info bg-opacity-10 fw-semibold text-info py-2 px-4 mt-2 me-2">اطلاعات</button>
<button type="button" class="btn bg-light bg-opacity-10 fw-semibold text-light py-2 px-4 mt-2 me-2">روشن</button>
<button type="button" class="btn bg-dark bg-opacity-10 fw-semibold text-dark py-2 px-4 mt-2 me-2">تاریک</button>
<button type="button" class="btn bg-link bg-opacity-10 fw-semibold text-link py-2 px-4 mt-2 me-2">لینک</button>

<span class="badge bg-opacity-10 bg-primary py-1 px-2 text-primary rounded-pill fw-semibold fs-12">اولیه</span>
<span class="badge bg-opacity-10 bg-secondary py-1 px-2 text-secondary rounded-pill fw-semibold fs-12">ثانوی</span>
<span class="badge bg-opacity-10 bg-success py-1 px-2 text-success rounded-pill fw-semibold fs-12">موفقیت</span>
<span class="badge bg-opacity-10 bg-danger py-1 px-2 text-danger rounded-pill fw-semibold fs-12">خطر</span>
<span class="badge bg-opacity-10 bg-warning py-1 px-2 text-warning rounded-pill fw-semibold fs-12">هشدار</span>
<span class="badge bg-opacity-10 bg-info py-1 px-2 text-info rounded-pill fw-semibold fs-12">اطلاعات</span>
<span class="badge bg-opacity-10 bg-light py-1 px-2 text-light rounded-pill fw-semibold fs-12">روشن</span>
<span class="badge bg-opacity-10 bg-dark py-1 px-2 text-dark rounded-pill fw-semibold fs-12">تاریک</span>

<h1>عنوان مثال <span class="badge bg-primary">جدید</span></h1>
<h2>عنوان مثال <span class="badge bg-secondary">جدید</span></h2>
<h3>عنوان مثال <span class="badge bg-success">جدید</span></h3>
<h4>عنوان مثال <span class="badge bg-warning">جدید</span></h4>
<h5>عنوان مثال <span class="badge bg-danger">جدید</span></h5>
<h6>عنوان مثال <span class="badge bg-info">جدید</span></h6>

<button type="button" class="btn btn-primary fw-semibold text-white">
	اطلاعیه <span class="badge text-bg-danger text-white">4</span>
</button>

<button type="button" class="btn btn-primary position-relative fw-semibold text-white">
	صندوق ورودی
	<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
		99+
		<span class="visually-hidden">پیام های خوانده نشده</span>
	</span>
</button>

<button type="button" class="btn btn-primary position-relative fw-semibold text-white">
	مشخصات
	<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
		<span class="visually-hidden">هشدارهای جدید</span>
	</span>
</button>

<span class="badge text-bg-primary bg-opacity-10 py-1 px-2 text-primary rounded-1 fw-semibold fs-12 d-flex align-items-center gap-1 py-3 px-4">
	<i class="ri-layout-grid-fill fs-18"></i>
	<span class="ms-1 fw-semibold fs-15">داشبورد</span>
	<span class="ms-1 bg-primary text-white py-1 px-2 rounded-1 fs-14 lh-1 ms-4">4</span>
	<i class="ri-arrow-down-s-line ms-1"></i>
</span>
<span class="badge text-bg-primary py-1 px-2 text-white rounded-1 fw-semibold fs-12 d-flex align-items-center gap-1 py-3 px-4 ms-3">
	<i class="ri-layout-grid-fill fs-18"></i>
	<span class="ms-1 fw-semibold fs-15">داشبورد</span>
	<span class="ms-1 bg-white bg-opacity-10 text-white py-1 px-2 rounded-1 fs-14 lh-1 ms-4">4</span>
	<i class="ri-arrow-down-s-line ms-1"></i>
</span>