Button

<div ui="cluster">
  <button ui="primary">اصلی</button>
  <button ui="secondary">ثانویه</button>
  <button ui="success">موفقیت</button>
  <button ui="warning">هشدار</button>
  <button ui="danger">حذف</button>
</div>

<div ui="cluster">
  <button ui="primary outline">Outline</button>
  <button ui="danger outline">Outline</button>
  <button ui="primary ghost">Ghost</button>
  <button ui="danger ghost">Ghost</button>
</div>

<div ui="stack">
  <div ui="cluster"><button ui="primary small">کوچک</button><button ui="primary">متوسط</button><button ui="primary large">بزرگ</button></div>
  <button ui="primary block">تمام‌عرض</button>
</div>

<div ui="cluster">
  <button ui="primary"><bana-icon name="save"></bana-icon> ذخیره</button>
  <button ui="secondary">ادامه <bana-icon name="arrow-end"></bana-icon></button>
  <button ui="icon" aria-label="بستن"><bana-icon name="close"></bana-icon></button>
  <button ui="danger icon" aria-label="حذف"><bana-icon name="trash"></bana-icon></button>
  <a href="#button" ui="button primary outline">لینک شبیه دکمه</a>
</div>

<div ui="cluster">
  <button ui="primary" aria-busy="true">در حال ذخیره</button>
  <button ui="primary" disabled>غیرفعال</button>
  <button ui="secondary" disabled>غیرفعال</button>
  <button ui="primary" aria-disabled="true">aria-disabled</button>
</div>

<div ui="button-group" role="group" aria-label="نما"><button ui="secondary">روز</button><button ui="secondary">هفته</button><button ui="secondary">ماه</button></div>