هشدار
پایه هشدارها

هشدارها برای ارتباط اطلاعات مهم و بهبود تجربه کاربر ضروری هستند. در این بخش، شما خواهید آموخت که چگونه از هشدارهای پایه به طور مؤثر برای ارائه اطلاعات و بهبود تجربه کاربر استفاده کنید. با اندازه‌های مختلف آزمایش کنید تا اندازه‌ای را پیدا کنید که بهترین تطابق با اهداف طراحی شما را داشته باشد و تجربه کاربری بهینه را ارائه دهد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

هشدارهای پایه جزء عناصر اساسی طراحی رابط کاربری هستند که به عنوان یک وسیله برای ارتباط پیام‌های مهم به صورت روشن و مؤثر به‌کار می‌روند. برای ساخت وب‌سایت یا برنامه، اضافه کردن هشدارها به عنوان یک وسیله برای ارتباط پیام‌های مهم به صورت روشن و مؤثر، می‌تواند تجربه کاربر را بهبود بخشیده و با ارائه اطلاعات و بازخورد به موقع، واکنش به پیام‌های مهم را بهبود بخشد.

آیکون هشدارها

آیکون‌های هشدارها اطلاعات مفید را با آیکون‌های قابل تشخیص ترکیب می‌کنند تا به کاربران پیام‌های مهم را به طریقی آسان منتقل کنند. این بخش به شما راهنمایی می‌کند که چگونه از هشدارهای آیکونی در پروژه خود استفاده کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

آیکون‌های هشدارها ابزار ارزشمندی هستند که تجربه کاربر را بهبود می‌بخشند، زیرا با ارائه پیام‌های واضح و جذاب به طریق بصری، تعامل کاربران را افزایش می‌دهند. با پیگیری مراحل فوق، به راحتی می‌توانید هشدارهای آیکونی را به پروژه خود ادغام کنید و به طور مؤثر اطلاعات مهم را به کاربران خود ارسال کنید.

هشدارها با محتوای بیشتر

هشدارهای محتوای اضافی به شما اجازه می‌دهند که اطلاعات بیشتری را به کاربران ارائه دهید. این امکان با اضافه کردن عناصر اضافی درون هشدار، مانند آیکون‌ها، برچسب‌ها یا متن اضافی فراهم می‌شود. این بخش راهنمایی در مورد استفاده موثر از هشدارهای محتوای اضافی ارائه می‌دهد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-slate-500 px-1 text-xs text-white"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-slate-500 px-1 text-xs text-white"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

هشدارهای محتوای اضافی ابزار مهمی برای ارسال اطلاعات غنی‌تر به کاربران هستند، همچنین طراحی تمیز و منظم را حفظ می‌کنند. با پیگیری مراحل فوق، می‌توانید به راحتی هشدارهای محتوای اضافی را به پروژه خود اضافه کرده و ارتباط خود را با کاربران بهبود بخشید. با کاربران.

هشدارهای آیکون دار و قابل رد کردن

هشدارهای آیکون دار و قابل رد کردن با ترکیب آیکون‌ها با گزینه بستن، به شما این امکان را می‌دهند که پیام‌های مهم را نمایش دهید و به کاربران اجازه دهید که پس از خواندن، هشدار را ببندند. این بخش راهنمایی در مورد استفاده موثر از این هشدارها ارائه می‌دهد و نشان می‌دهد که چگونه می‌توانید از آن‌ها به‌طور مؤثر استفاده کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 text-white"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 text-white"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 text-white"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

هشدارهای آیکون دار و قابل رد کردن یک روش کاربرپسند برای ارائه اطلاعات و امکان مدیریت هشدارهای کاربران است. با پیگیری مراحل فوق، می‌توانید این نوع هشدارها را به طور سریع واقعی به پروژه خود اضافه کنید و تعامل کاربر و ارتباط را بهبود بخشید.

هشدارهای خط دار

هشدارهای خط دار یک روش ساده و حداقلی برای نمایش پیام‌های مهم با مرزهای واضح ارائه می‌دهند. این بخش راهنمایی در مورد استفاده موثر از این نوع هشدارها را ارائه می‌دهد تا بتوانید اطلاعات را به کاربران خود ارسال کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-primary text-primary dark:border-primary mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-success text-success dark:border-success dark:border-success mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-warning text-warning dark:border-warning mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-pending text-pending dark:border-pending mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-danger text-danger dark:border-danger mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-dark text-dark dark:border-darkmode-800 dark:text-slate-300 mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

هشدارهای خط دار یک راه زیبا و موثر برای انتقال اطلاعات اساسی به کاربران هستند در حالی که طراحی تمیز و حفظ می‌شود. با پیگیری مراحل فوق، می‌توانید به طور سریع این نوع هشدارها را به پروژه خود اضافه کرده و تجربه کاربری را بهبود بخشید. همچنین می‌توانید با امتحان اندازه‌های مختلف، به اندازه‌ای برسید که بهترین تطابق با اهداف طراحی شما را داشته باشد و تجربه کاربری بهینه را فراهم کند.

هشدارهای رنگ روشن

هشدارهای رنگ روشن یک راهکار بصری دلپذیر و نرم برای کاربران ارائه می‌دهند. این بخش راهنمایی موثری را برای بهبود تجربه کاربر از این نوع هشدارها ارائه می‌دهد. با امتحان اندازه‌های مختلف، بهترین تطابق با اهداف طراحی شما را پیدا کنید و تجربه کاربری بهینه را فراهم کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-slate-300 border-secondary bg-opacity-10 text-slate-500 dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-success border-success bg-opacity-20 border-opacity-5 text-success dark:border-success dark:border-opacity-20 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning dark:border-warning dark:border-opacity-20 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending dark:border-pending dark:border-opacity-20 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger dark:border-danger dark:border-opacity-20 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-dark border-dark bg-opacity-20 border-opacity-5 text-dark dark:bg-darkmode-800/30 dark:border-darkmode-800/60 dark:text-slate-300 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

هشدارهای رنگ روشن یک راه حل ملایم و دلپذیر برای انتقال اطلاعات اساسی به کاربران است، در حالی که ظاهر زیبا و لطیفی را حفظ می‌کنند. با پیگیری مراحل فوق، می‌توانید به طور سریع و آسان این هشدارها را به پروژه خود اضافه کرده و تجربه کاربری جذابی ایجاد کنید. با آزمایش اندازه‌های مختلف، بهترین تطابق با اهداف طراحی خود را پیدا کنید و تجربه کاربری بهینه را به کاربران ارائه دهید.

رابط اجزاء

در این بخش، اطلاعات جزئی در مورد ویژگی‌ها، کلاس‌ها و گزینه‌های موجود که می‌توانید با اجزاء است. درک این خصوصیات برای سفارشی کردن و پیکربندی اجزاء برای مطابقت با نیازهای خاص شما ضروری است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

هشدار
پراپ (Prop) نوع (Type) شرح
`dismissible` `boolean` نشان می‌دهد که آیا می‌توان هشدار را رد کرد
`variant` `Variant` نوعی از سبک هشدار
`onShow` `() => {}` پس از نشان داده شدن هشدار، تابع فراخوانی می‌شود
`onShown` `() => {}` پس از نشان داده شدن هشدار، تابع فراخوانی می‌شود
`onHide` `() => {}` پیش از مخفی شدن هشدار، تابع فراخوانی می‌شود
`onHidden` `() => {}` پس از مخفی شدن هشدار، تابع فراخوانی می‌شود
هشدار.رد کردندکمه
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML برای دکمه رد کردن به طور عمومی یک دکمه است. بنابراین، "دکمه" معمولاً به عنوان عنصر HTML برای دکمه‌های رد کردن استفاده می‌شود. پیشفرض ("دکمه" یا "لینک")