این صفحه را قبل استفاده از کامپوننتها ببینید :) در صورت عدم بارگذاری پیش‌نمایش با Vpn امتحان کنید.
  • هشدار
پیش فرض

برای نمایش پیام به عنوان بازخورد به کاربران خود، از نمونه‌های زیر برای کامپوننت‌های هشدار استفاده کنید.

<!-- alert:success -->
<div class="flex items-start gap-3 rtl:bg-gradient-to-l ltr:bg-gradient-to-r from-green-100 dark:from-green-950 to-white dark:to-zinc-900 border border-green-300 dark:border-green-900 rounded-xl p-5"
    x-data="{ alertIsVisible: true }" x-show="alertIsVisible">
    <span
        class="shrink-0 inline-flex items-center justify-center w-8 h-8 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-full text-green-500">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5">
            <path
                d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z">
            </path>
        </svg>
    </span>
    <div class="grow flex flex-col items-start">
        <h3 class="font-bold text-sm text-green-500">سفارش شما با موفقیت ثبت شد.</h3>
        <p class="font-semibold text-xs text-zinc-400 mt-1">
            هم اکنون از طریق حساب کاربری و بخش سفارش‌ها، می توانید سفارش خود را پیگیری کنید.
        </p>
        <div class="flex flex-wrap items-center gap-3 mt-3">
            <a href="#" class="flex items-center text-green-500 transition-all hover:text-green-600 active:scale-95">
                <span class="font-semibold text-xs whitespace-nowrap">پیگیری سفارش</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 ms-1">
                    <path
                        d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z">
                    </path>
                </svg>
            </a>
            <span class="inline-block w-1 h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full"></span>
            <button type="button"
                class="flex items-center text-zinc-400 transition-all hover:text-zinc-600 active:scale-95"
                x-on:click="alertIsVisible = false">
                <span class="font-semibold text-xs whitespace-nowrap">فهمیدم</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 ms-1">
                    <path
                        d="M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z">
                    </path>
                </svg>
            </button>
        </div>
    </div>
</div><!-- end alert:success -->

<!-- alert:danger -->
<div class="flex items-start gap-3 rtl:bg-gradient-to-l ltr:bg-gradient-to-r from-red-100 dark:from-red-950 to-white dark:to-zinc-900 border border-red-300 dark:border-red-900 rounded-xl p-5"
    x-data="{ alertIsVisible: true }" x-show="alertIsVisible">
    <span
        class="shrink-0 inline-flex items-center justify-center w-8 h-8 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-full text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5">
            <path
                d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z">
            </path>
        </svg>
    </span>
    <div class="grow flex flex-col items-start">
        <h3 class="font-bold text-sm text-red-500">پرداخت سفارش با خطا مواجه شد.</h3>
        <p class="font-semibold text-xs text-zinc-400 mt-1">
            برای جلوگیری از لغو سیستمی سفارش، تا ۲۴ ساعت آینده پرداخت را انجام دهید.
        </p>
        <div class="flex flex-wrap items-center gap-3 mt-3">
            <a href="#" class="flex items-center text-red-500 transition-all hover:text-red-600 active:scale-95">
                <span class="font-semibold text-xs whitespace-nowrap">پرداخت سفارش</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 ms-1">
                    <path
                        d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z">
                    </path>
                </svg>
            </a>
            <span class="inline-block w-1 h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full"></span>
            <button type="button"
                class="flex items-center text-zinc-400 transition-all hover:text-zinc-600 active:scale-95"
                x-on:click="alertIsVisible = false">
                <span class="font-semibold text-xs whitespace-nowrap">فهمیدم</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 ms-1">
                    <path
                        d="M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z">
                    </path>
                </svg>
            </button>
        </div>
    </div>
</div><!-- end alert:danger -->

<!-- alert:warning -->
<div class="flex items-start gap-3 rtl:bg-gradient-to-l ltr:bg-gradient-to-r from-orange-100 dark:from-orange-950 to-white dark:to-zinc-900 border border-orange-300 dark:border-orange-900 rounded-xl p-5"
    x-data="{ alertIsVisible: true }" x-show="alertIsVisible">
    <span
        class="shrink-0 inline-flex items-center justify-center w-8 h-8 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-full text-orange-500">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5">
            <path
                d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z">
            </path>
        </svg>
    </span>
    <div class="grow flex flex-col items-start">
        <h3 class="font-bold text-sm text-orange-500">اشتراک شما به زودی منقضی می شود.</h3>
        <p class="font-semibold text-xs text-zinc-400 mt-1">
            هم اکنون می توانید از طریق حساب کاربری و بخش اشتراک، اقدام به تمدید اشتراک خود کنید.
        </p>
        <div class="flex flex-wrap items-center gap-3 mt-3">
            <a href="#" class="flex items-center text-orange-500 transition-all hover:text-orange-600 active:scale-95">
                <span class="font-semibold text-xs whitespace-nowrap">تمدید اشتراک</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 ms-1">
                    <path
                        d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z">
                    </path>
                </svg>
            </a>
            <span class="inline-block w-1 h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full"></span>
            <button type="button"
                class="flex items-center text-zinc-400 transition-all hover:text-zinc-600 active:scale-95"
                x-on:click="alertIsVisible = false">
                <span class="font-semibold text-xs whitespace-nowrap">فهمیدم</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 ms-1">
                    <path
                        d="M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z">
                    </path>
                </svg>
            </button>
        </div>
    </div>
</div><!-- end alert:warning -->

<!-- alert:info -->
<div class="flex items-start gap-3 rtl:bg-gradient-to-l ltr:bg-gradient-to-r from-cyan-100 dark:from-cyan-950 to-white dark:to-zinc-900 border border-cyan-300 dark:border-cyan-900 rounded-xl p-5"
    x-data="{ alertIsVisible: true }" x-show="alertIsVisible">
    <span
        class="shrink-0 inline-flex items-center justify-center w-8 h-8 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-full text-cyan-500">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5">
            <path
                d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z">
            </path>
        </svg>
    </span>
    <div class="grow flex flex-col items-start">
        <h3 class="font-bold text-sm text-cyan-500">بروزرسانی جدید در دسترس است.</h3>
        <p class="font-semibold text-xs text-zinc-400 mt-1">
            هم اکنون از طریق بخش تنظیمات، می توانید اقدام به نصب جدیدترین بروزرسانی منتشر شده کنید.
        </p>
        <div class="flex flex-wrap items-center gap-3 mt-3">
            <a href="#" class="flex items-center text-cyan-500 transition-all hover:text-cyan-600 active:scale-95">
                <span class="font-semibold text-xs whitespace-nowrap">نصب بروزرسانی</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 ms-1">
                    <path
                        d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z">
                    </path>
                </svg>
            </a>
            <span class="inline-block w-1 h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full"></span>
            <button type="button"
                class="flex items-center text-zinc-400 transition-all hover:text-zinc-600 active:scale-95"
                x-on:click="alertIsVisible = false">
                <span class="font-semibold text-xs whitespace-nowrap">فهمیدم</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 ms-1">
                    <path
                        d="M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z">
                    </path>
                </svg>
            </button>
        </div>
    </div>
</div><!-- end alert:info -->