دکمه

<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" data-variant="primary" data-size="md" class="k-btn k-btn--primary">ذخیره</button>
<button type="button" data-variant="secondary" data-size="md" class="k-btn k-btn--secondary">پیش‌نمایش</button>
<button type="button" data-variant="tertiary" data-size="md" class="k-btn k-btn--tertiary">انصراف</button>
<button type="button" data-variant="link" data-size="md" class="k-btn k-btn--link">اطلاعات بیشتر</button>
<button type="button" data-variant="danger" data-size="md" class="k-btn k-btn--danger">حذف</button>
<button type="button" data-variant="danger-secondary" data-size="md" 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" data-variant="primary" data-size="sm" class="k-btn k-btn--primary k-btn--sm">کوچک</button>
<button type="button" data-variant="primary" data-size="md" class="k-btn k-btn--primary">متوسط</button>
<button type="button" data-variant="primary" data-size="lg" class="k-btn k-btn--primary k-btn--lg">بزرگ</button>
<button type="button" data-variant="primary" data-size="xl" 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" data-variant="primary" data-size="md" class="k-btn k-btn--primary"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-kashi-icon="plus"><path d="M10 5v10M5 10h10"/></svg>پروژهٔ جدید</button>
<button type="button" data-variant="secondary" data-size="md" class="k-btn k-btn--secondary">ادامه<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-kashi-icon="arrow-right" data-k-mirror=""><path d="M3.75 10h12.5M11.2 4.95 16.25 10l-5.05 5.05"/></svg></button>
<button type="button" data-variant="secondary" data-size="md" class="k-btn k-btn--secondary k-btn--icon" aria-label="جستجو"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-kashi-icon="search"><circle cx="9.1" cy="9.1" r="6.2"/><path d="m14.9 14.9 2.3 2.3"/></svg></button>
<button type="button" data-variant="danger-secondary" data-size="md" class="k-btn k-btn--danger-secondary k-btn--icon" aria-label="حذف"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-kashi-icon="trash"><path d="M3.5 5.6h13M7.6 5.5l.35-1.35c.15-.6.7-1 1.3-1h1.5c.6 0 1.15.4 1.3 1l.35 1.35M15 5.6l-.6 9.1c-.1 1.5-1.35 2.55-2.85 2.55h-3.1c-1.5 0-2.75-1.05-2.85-2.55L5 5.6M8.6 9.1v4.5M11.4 9.1v4.5"/></svg></button>

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

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

<Button variant="primary" shape="pill">کاملاً گرد</Button>
<Button shape="square">گوشهٔ کم</Button>
<Button size="xs">خیلی کوچک</Button>
<Button href="/docs" variant="link">دکمهٔ لینکی</Button>
<Button as={Link} href="/pricing">با Link در Next.js</Button>

<button type="button" data-variant="primary" data-size="md" class="k-btn k-btn--primary k-btn--pill">کاملاً گرد</button>
<button type="button" data-variant="secondary" data-size="md" class="k-btn k-btn--secondary k-btn--square">گوشهٔ کم</button>
<button type="button" data-variant="secondary" data-size="xs" class="k-btn k-btn--secondary k-btn--xs">خیلی کوچک</button><a href="#" data-variant="link" data-size="md" class="k-btn k-btn--link">دکمهٔ لینکی</a><a href="#" data-variant="secondary" data-size="md" class="k-btn k-btn--secondary">لینک با ظاهر دکمه<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-kashi-icon="arrow-right" data-k-mirror=""><path d="M3.75 10h12.5M11.2 4.95 16.25 10l-5.05 5.05"/></svg></a>