هشدار

<Alert tone="brand" title="نسخهٔ جدید منتشر شد">کاشی ۰.۲ با هفت کامپوننت تازه در دسترس است.</Alert>
<Alert tone="success" title="تغییرات ذخیره شد" />
<Alert tone="warning" title="اشتراک شما ۳ روز دیگر تمام می‌شود">برای جلوگیری از قطع سرویس، اشتراک را تمدید کنید.</Alert>
<Alert tone="error" title="پرداخت ناموفق بود">موجودی کارت کافی نیست. کارت دیگری را امتحان کنید.</Alert>

<div role="status" class="k-alert k-alert--brand"><span class="k-alert__icon" aria-hidden="true"><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="10" cy="10" r="7.5"></circle><path d="M10 13.5V9.5M10 6.5h.01"></path></svg></span>
  <div class="k-alert__content">
    <p class="k-alert__title">نسخهٔ جدید منتشر شد</p>
    <div class="k-alert__description">کاشی ۰.۲ با هفت کامپوننت تازه در دسترس است.</div>
  </div>
</div>
<div role="status" class="k-alert k-alert--success"><span class="k-alert__icon" aria-hidden="true"><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="10" cy="10" r="7.5"></circle><path d="m6.75 10 2.25 2.25 4.25-4.5"></path></svg></span>
  <div class="k-alert__content">
    <p class="k-alert__title">تغییرات ذخیره شد</p>
  </div>
</div>
<div role="alert" class="k-alert k-alert--warning"><span class="k-alert__icon" aria-hidden="true"><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="M8.6 3.4 2.4 14a1.6 1.6 0 0 0 1.4 2.4h12.4a1.6 1.6 0 0 0 1.4-2.4L11.4 3.4a1.6 1.6 0 0 0-2.8 0Z"></path><path d="M10 7.5v3.25M10 13.5h.01"></path></svg></span>
  <div class="k-alert__content">
    <p class="k-alert__title">اشتراک شما ۳ روز دیگر تمام می‌شود</p>
    <div class="k-alert__description">برای جلوگیری از قطع سرویس، اشتراک را تمدید کنید.</div>
  </div>
</div>
<div role="alert" class="k-alert k-alert--error"><span class="k-alert__icon" aria-hidden="true"><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="10" cy="10" r="7.5"></circle><path d="M10 6.5v4M10 13.5h.01"></path></svg></span>
  <div class="k-alert__content">
    <p class="k-alert__title">پرداخت ناموفق بود</p>
    <div class="k-alert__description">موجودی کارت کافی نیست. کارت دیگری را امتحان کنید.</div>
  </div>
</div>

<Alert
tone="info"
title="به‌روزرسانی در دسترس است"
actions={<>
  <Button variant="link">به‌روزرسانی</Button>
  <Button variant="link">بعداً</Button>
</>}
onClose={() => setOpen(false)}
>
نسخهٔ جدید بهبودهای امنیتی دارد.
</Alert>

<div role="status" class="k-alert k-alert--info"><span class="k-alert__icon" aria-hidden="true"><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="10" cy="10" r="7.5"></circle><path d="M10 13.5V9.5M10 6.5h.01"></path></svg></span>
  <div class="k-alert__content">
    <p class="k-alert__title">به‌روزرسانی در دسترس است</p>
    <div class="k-alert__description">نسخهٔ جدید بهبودهای امنیتی دارد.</div>
    <div class="k-alert__actions">
      <button type="button" class="k-btn k-btn--link">به‌روزرسانی</button>
      <button type="button" class="k-btn k-btn--link">بعداً</button>
    </div>
  </div>
  <button type="button" class="k-btn k-btn--tertiary k-btn--icon k-btn--sm k-alert__close" 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="m5 5 10 10M15 5 5 15"></path></svg></button>
</div>

<Alert tone="warning" tinted title="حالت نگهداری">سرویس امشب از ساعت ۲ تا ۴ در دسترس نیست.</Alert>

<div role="alert" class="k-alert k-alert--warning k-alert--tinted"><span class="k-alert__icon" aria-hidden="true"><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="M8.6 3.4 2.4 14a1.6 1.6 0 0 0 1.4 2.4h12.4a1.6 1.6 0 0 0 1.4-2.4L11.4 3.4a1.6 1.6 0 0 0-2.8 0Z"></path><path d="M10 7.5v3.25M10 13.5h.01"></path></svg></span>
  <div class="k-alert__content">
    <p class="k-alert__title">حالت نگهداری</p>
    <div class="k-alert__description">سرویس امشب از ساعت ۲ تا ۴ در دسترس نیست.</div>
  </div>
</div>