دکمه

<Button variant="primary">ذخیره</Button>
<Button variant="secondary">پیش‌نمایش</Button>
<Button variant="tertiary">انصراف</Button>
<Button variant="link">اطلاعات بیشتر</Button>
<Button variant="danger">حذف</Button>
<Button variant="danger-secondary">بایگانی</Button>

<button type="button" class="k-btn k-btn--primary">ذخیره</button>
<button type="button" class="k-btn k-btn--secondary">پیش‌نمایش</button>
<button type="button" class="k-btn k-btn--tertiary">انصراف</button>
<button type="button" class="k-btn k-btn--link">اطلاعات بیشتر</button>
<button type="button" class="k-btn k-btn--danger">حذف</button>
<button type="button" class="k-btn k-btn--danger-secondary">بایگانی</button>

<Button variant="primary" size="sm">کوچک</Button>
<Button variant="primary">متوسط</Button>
<Button variant="primary" size="lg">بزرگ</Button>
<Button variant="primary" size="xl">خیلی بزرگ</Button>

<button type="button" class="k-btn k-btn--primary k-btn--sm">کوچک</button>
<button type="button" class="k-btn k-btn--primary">متوسط</button>
<button type="button" class="k-btn k-btn--primary k-btn--lg">بزرگ</button>
<button type="button" class="k-btn k-btn--primary k-btn--xl">خیلی بزرگ</button>

<Button variant="primary" iconStart={<PlusIcon />}>پروژهٔ جدید</Button>
<Button iconEnd={<ArrowIcon />}>ادامه</Button>
<Button iconOnly aria-label="جستجو"><SearchIcon /></Button>
<Button variant="danger-secondary" iconOnly aria-label="حذف"><TrashIcon /></Button>

<button type="button" class="k-btn k-btn--primary"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 4v12M4 10h12"></path></svg>پروژهٔ جدید</button>
<button type="button" class="k-btn k-btn--secondary">ادامه<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-k-mirror=""><path d="M4 10h12m-5-5 5 5-5 5"></path></svg></button>
<button type="button" class="k-btn k-btn--secondary k-btn--icon" aria-label="جستجو"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="9" r="5.5"></circle><path d="m13.5 13.5 3 3"></path></svg></button>
<button type="button" class="k-btn k-btn--danger-secondary k-btn--icon" aria-label="حذف"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 5.5h13M8 5.5V4h4v1.5M5 5.5l.8 10.2a1.5 1.5 0 0 0 1.5 1.3h5.4a1.5 1.5 0 0 0 1.5-1.3L15 5.5"></path></svg></button>

<Button variant="primary" loading>پرداخت</Button>
<Button disabled>غیرفعال</Button>

<button type="button" aria-disabled="true" aria-busy="true" class="k-btn k-btn--primary">پرداخت<span class="k-sr-only" role="status">در حال بارگذاری</span></button>
<button type="button" disabled="" class="k-btn k-btn--secondary">غیرفعال</button>