دکمه
دکمه های پیشفرض
<button type="button" class="btn bg-primary text-white">اصلی</button>
<button type="button" class="btn bg-success text-white">موفقیت</button>
<button type="button" class="btn bg-info text-white">اطلاعات</button>
<button type="button" class="btn bg-warning text-white">هشدار</button>
<button type="button" class="btn bg-danger text-white">خطر</button>
<button type="button" class="btn bg-dark text-white">تیره</button>
<button type="button" class="btn bg-secondary text-white">ثانویه</button>
<button type="button" class="btn bg-light text-slate-900 dark:text-slate-200">روشن</button>
دکمه های گرد شده
<button type="button" class="btn bg-primary text-white rounded-full">اصلی</button>
<button type="button" class="btn bg-success text-white rounded-full">موفقیت</button>
<button type="button" class="btn bg-info text-white rounded-full">اطلاعات</button>
<button type="button" class="btn bg-warning text-white rounded-full">هشدار</button>
<button type="button" class="btn bg-danger text-white rounded-full">خطر</button>
<button type="button" class="btn bg-dark text-white rounded-full">تیره</button>
<button type="button" class="btn bg-secondary text-white rounded-full">ثانویه</button>
<button type="button" class="btn bg-light text-slate-900 dark:text-slate-200 rounded-full">روشن</button>
دکمههای خطی
<button type="button" class="btn border-primary text-primary hover:bg-primary hover:text-white">اصلی</button>
<button type="button" class="btn border-success text-success hover:bg-success hover:text-white">موفقیت</button>
<button type="button" class="btn border-info text-info hover:bg-info hover:text-white">اطلاعات</button>
<button type="button" class="btn border-warning text-warning hover:bg-warning hover:text-white">هشدار</button>
<button type="button" class="btn border-danger text-danger hover:bg-danger hover:text-white">خطر</button>
<button type="button" class="btn border-dark text-slate-900 dark:text-slate-200 hover:bg-dark hover:text-white">تیره</button>
<button type="button" class="btn border-secondary text-secondary hover:bg-secondary hover:text-white">ثانویه</button>
دکمههای خطی گرد
<button type="button" class="btn rounded-full border border-primary text-primary hover:bg-primary hover:text-white">اصلی</button>
<button type="button" class="btn rounded-full border border-success text-success hover:bg-success hover:text-white">موفقیت</button>
<button type="button" class="btn rounded-full border border-info text-info hover:bg-info hover:text-white">اطلاعات</button>
<button type="button" class="btn rounded-full border border-warning text-warning hover:bg-warning hover:text-white">هشدار</button>
<button type="button" class="btn rounded-full border border-danger text-danger hover:bg-danger hover:text-white">خطر</button>
<button type="button" class="btn rounded-full border border-dark text-slate-900 dark:text-slate-200 hover:bg-dark hover:text-white">تیره</button>
<button type="button" class="btn rounded-full border border-secondary text-secondary hover:bg-secondary hover:text-white">ثانویه</button>
دکمه های نرم
<button type="button" class="btn bg-primary/25 text-primary hover:bg-primary hover:text-white">اصلی</button>
<button type="button" class="btn bg-success/25 text-success hover:bg-success hover:text-white">موفقیت</button>
<button type="button" class="btn bg-info/25 text-info hover:bg-info hover:text-white">اطلاعات</button>
<button type="button" class="btn bg-warning/25 text-warning hover:bg-warning hover:text-white">هشدار</button>
<button type="button" class="btn bg-danger/25 text-danger hover:bg-danger hover:text-white">خطر</button>
<button type="button" class="btn bg-dark/25 text-white hover:bg-dark">تیره</button>
<button type="button" class="btn bg-secondary/25 text-secondary hover:bg-secondary hover:text-white">ثانویه</button>
دکمه های نرم گردشده
<button type="button" class="btn rounded-full bg-primary/25 text-primary hover:bg-primary hover:text-white">اصلی</button>
<button type="button" class="btn rounded-full bg-success/25 text-success hover:bg-success hover:text-white">موفقیت</button>
<button type="button" class="btn rounded-full bg-info/25 text-info hover:bg-info hover:text-white">اطلاعات</button>
<button type="button" class="btn rounded-full bg-warning/25 text-warning hover:bg-warning hover:text-white">هشدار</button>
<button type="button" class="btn rounded-full bg-danger/25 text-danger hover:bg-danger hover:text-white">خطر</button>
<button type="button" class="btn rounded-full bg-dark/25 text-slate-900 dark:text-slate-200 hover:bg-dark hover:text-white">تیره</button>
<button type="button" class="btn rounded-full bg-secondary/25 text-secondary hover:bg-secondary hover:text-white">ثانویه</button>
دکمه همراه با آیکون
<button type="button" class="btn bg-primary text-white"><i class="mgc_check_line text-base me-4"></i> اصلی</button>
<button type="button" class="btn bg-success text-white"><i class="mgc_check_line text-base me-4"></i> موفقیت</button>
<button type="button" class="btn bg-info text-white"><i class="mgc_alert_line text-base me-4"></i> اطلاعات</button>
<button type="button" class="btn bg-warning text-white"><i class="mgc_warning_line text-base me-4"></i> هشدار</button>
<button type="button" class="btn bg-danger text-white"><i class="mgc_close_line text-base me-4"></i> خطر</button>
<button type="button" class="btn bg-dark text-white"><i class="mgc_check_line text-base me-4"></i> تیره</button>
سایزبندی
<button type="button" class="btn btn-sm bg-primary text-white">کوچک</button>
<button type="button" class="btn bg-primary text-white">بزرگ</button>
<button type="button" class="btn btn-lg bg-primary text-white">پیشفرض</button>
بلاک دکمه
<button type="button" class="btn w-full bg-primary text-white">پیشفرض</button>
<button type="button" class="btn w-full border-primary text-primary">پیشفرض</button>
غیرفعال شده
<button type="button" class="btn bg-primary text-white" disabled>Disabled</button>
<button type="button" class="btn border-primary text-primary" disabled>Disabled</button>