دکمه‌ها
دکمه‌های پایه

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-wrap gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-24 w-24"
HTMLCloseTagاصلیHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 w-24 w-24"
HTMLCloseTagثانویHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-slate-900 dark:border-success w-24 w-24"
HTMLCloseTagموفقیتHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-warning border-warning text-slate-900 dark:border-warning w-24 w-24"
HTMLCloseTagاخطارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-pending border-pending text-white dark:border-pending w-24 w-24"
HTMLCloseTagدر انتظارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-danger border-danger text-white dark:border-danger w-24 w-24"
HTMLCloseTagخطرHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70 w-24 w-24"
HTMLCloseTagتیرهHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

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

سایزهای دکمه

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed text-xs py-1.5 px-2 bg-primary border-primary text-white dark:border-primary w-24 w-24"
HTMLCloseTagکوچکHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-24 w-24"
HTMLCloseTagمتوسطHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed text-lg py-1.5 px-4 bg-primary border-primary text-white dark:border-primary w-24 w-24"
HTMLCloseTagبزرگHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-5 flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed text-xs py-1.5 px-2 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 w-24 w-24"
HTMLCloseTagکوچکHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 w-24 w-24"
HTMLCloseTagمتوسطHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed text-lg py-1.5 px-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 w-24 w-24"
HTMLCloseTagبزرگHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

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

کار با پیوندها

کامپوننت دکمه پیوند به شما امکان می‌دهد دکمه‌هایی ایجاد کنید که عملکردی مشابه با لینک داشته باشند. این دکمه‌ها چند منظوره هستند و می‌توانند برای راهبری به بخش‌های مختلف وب‌سایت شما یا آدرس‌های خارجی استفاده شوند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    href="" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary inline-block w-24 inline-block w-24"
HTMLCloseTagپیوندHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    href="" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 inline-block w-24 inline-block w-24"
HTMLCloseTagدکمهHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    href="" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-slate-900 dark:border-success inline-block w-24 inline-block w-24"
HTMLCloseTagInputHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    href="" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-warning border-warning text-slate-900 dark:border-warning inline-block w-24 inline-block w-24"
HTMLCloseTagثبتHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    href="" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-pending border-pending text-white dark:border-pending inline-block w-24 inline-block w-24"
HTMLCloseTagدر انتظارHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    href="" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-danger border-danger text-white dark:border-danger inline-block w-24 inline-block w-24"
HTMLCloseTagتنظیم مجددHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    href="" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70 inline-block w-24 inline-block w-24"
HTMLCloseTagفلزیHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

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

دکمه‌های بالابرده

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary shadow-md w-24 w-24"
HTMLCloseTagاصلیHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 shadow-md w-24 w-24"
HTMLCloseTagثانویHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-slate-900 dark:border-success shadow-md w-24 w-24"
HTMLCloseTagموفقیتHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-warning border-warning text-slate-900 dark:border-warning shadow-md w-24 w-24"
HTMLCloseTagاخطارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-pending border-pending text-white dark:border-pending shadow-md w-24 w-24"
HTMLCloseTagدر انتظارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-danger border-danger text-white dark:border-danger shadow-md w-24 w-24"
HTMLCloseTagخطرHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70 shadow-md w-24 w-24"
HTMLCloseTagتیرهHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-5 flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary rounded-full shadow-md w-24 w-24"
HTMLCloseTagاصلیHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 rounded-full shadow-md w-24 w-24"
HTMLCloseTagثانویHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-slate-900 dark:border-success rounded-full shadow-md w-24 w-24"
HTMLCloseTagموفقیتHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-warning border-warning text-slate-900 dark:border-warning rounded-full shadow-md w-24 w-24"
HTMLCloseTagاخطارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-pending border-pending text-white dark:border-pending rounded-full shadow-md w-24 w-24"
HTMLCloseTagدر انتظارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-danger border-danger text-white dark:border-danger rounded-full shadow-md w-24 w-24"
HTMLCloseTagخطرHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70 rounded-full shadow-md w-24 w-24"
HTMLCloseTagتیرهHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

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

دکمه‌های رسانه‌های اجتماعی

دکمه‌های رسانه‌های اجتماعی برای برقراری ارتباط با مخاطبان خود و تبلیغ محتوای شما در پلتفرم‌های اینترنتی استفاده می‌شوند. این بخش شامل دکمه‌های رسانه‌های اجتماعی با آیکون‌ها و سبک‌های مختلف می‌باشد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="mt-5 flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-[#3b5998] border-[#3b5998] text-white dark:border-[#3b5998] w-32 w-32"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="facebook"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        فیس‌بوکHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-[#4ab3f4] border-[#4ab3f4] text-white dark:border-[#4ab3f4] w-32 w-32"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="twitter"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        توییترHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-[#517fa4] border-[#517fa4] text-white dark:border-[#517fa4] w-32 w-32"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="instagram"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        اینستاگرامHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-[#0077b5] border-[#0077b5] text-white dark:border-[#0077b5] w-32 w-32"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="linkedin"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        LinkedinHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

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

دکمه‌های حاشیه‌نگاری

دکمه‌های خط مرزی یک راه ملایم و شیک برای ارائه اعمال یا گزینه‌ها به کاربران شما فراهم می‌کنند. آن‌ها ظاهری تمیز و حداقلیت را حفظ می‌کنند در حالی که امکان ارتباط را اعلام می‌کنند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-primary text-primary dark:border-primary [&:hover:not(:disabled)]:bg-primary/10 inline-block w-24 inline-block w-24"
HTMLCloseTagاصلیHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 inline-block w-24 inline-block w-24"
HTMLCloseTagثانویHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-success text-success dark:border-success [&:hover:not(:disabled)]:bg-success/10 inline-block w-24 inline-block w-24"
HTMLCloseTagموفقیتHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-warning text-warning dark:border-warning [&:hover:not(:disabled)]:bg-warning/10 inline-block w-24 inline-block w-24"
HTMLCloseTagاخطارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-pending text-pending dark:border-pending [&:hover:not(:disabled)]:bg-pending/10 inline-block w-24 inline-block w-24"
HTMLCloseTagدر انتظارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-danger text-danger dark:border-danger [&:hover:not(:disabled)]:bg-danger/10 inline-block w-24 inline-block w-24"
HTMLCloseTagخطرHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-dark text-dark dark:border-darkmode-800 dark:text-slate-300 [&:hover:not(:disabled)]:bg-darkmode-800/30 [&:hover:not(:disabled)]:dark:bg-opacity-30 inline-block w-24 inline-block w-24"
HTMLCloseTagتیرهHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

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

دکمه‌های وضعیت بارگذاری

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagذخیره کردن
                                                        HTMLOpenTagspan class="rtl:mr-2 ltr:ml-2 h-4 w-4"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="25"
            viewBox="-2 -2 42 42"
            xmlns="http://www.w3.org/2000/svg"
            stroke="white"
        HTMLCloseTag
            HTMLOpenTagg
                fill="none"
                fill-rule="evenodd"
            HTMLCloseTag
                HTMLOpenTagg
                    transform="translate(1 1)"
                    stroke-width="4"
                HTMLCloseTag
                    HTMLOpenTagcircle
                        stroke-opacity=".5"
                        cx="18"
                        cy="18"
                        r="18"
                    /HTMLCloseTag
                    HTMLOpenTagpath d="M36 18c0-9.94-8.06-18-18-18"HTMLCloseTag
                        HTMLOpenTaganimateTransform
                            type="rotate"
                            attributeName="transform"
                            from="0 18 18"
                            to="360 18 18"
                            dur="1s"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/pathHTMLCloseTag
                HTMLOpenTag/gHTMLCloseTag
            HTMLOpenTag/gHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-slate-900 dark:border-success"
HTMLCloseTagافزودن
                                                        HTMLOpenTagspan class="rtl:mr-2 ltr:ml-2 h-4 w-4"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="20"
            viewBox="0 0 58 58"
            xmlns="http://www.w3.org/2000/svg"
        HTMLCloseTag
            HTMLOpenTagg
                fill="none"
                fill-rule="evenodd"
            HTMLCloseTag
                HTMLOpenTagg
                    transform="translate(2 1)"
                    stroke="white"
                    stroke-width="1.5"
                HTMLCloseTag
                    HTMLOpenTagcircle
                        cx="42.601"
                        cy="11.462"
                        r="5"
                        fill-opacity="1"
                        fill="white"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="1;0;0;0;0;0;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="49.063"
                        cy="27.063"
                        r="5"
                        fill-opacity="0"
                        fill="white"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;1;0;0;0;0;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="42.601"
                        cy="42.663"
                        r="5"
                        fill-opacity="0"
                        fill="white"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;1;0;0;0;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="27"
                        cy="49.125"
                        r="5"
                        fill-opacity="0"
                        fill="white"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;0;1;0;0;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="11.399"
                        cy="42.663"
                        r="5"
                        fill-opacity="0"
                        fill="white"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;0;0;1;0;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="4.938"
                        cy="27.063"
                        r="5"
                        fill-opacity="0"
                        fill="white"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;0;0;0;1;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="11.399"
                        cy="11.462"
                        r="5"
                        fill-opacity="0"
                        fill="white"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;0;0;0;0;1;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="27"
                        cy="5"
                        r="5"
                        fill-opacity="0"
                        fill="white"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;0;0;0;0;0;1"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                HTMLOpenTag/gHTMLCloseTag
            HTMLOpenTag/gHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-warning border-warning text-slate-900 dark:border-warning"
HTMLCloseTagبارگذاری
                                                        HTMLOpenTagspan class="rtl:mr-2 ltr:ml-2 h-4 w-4"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="25"
            viewBox="0 0 120 30"
            xmlns="http://www.w3.org/2000/svg"
            fill="1a202c"
        HTMLCloseTag
            HTMLOpenTagcircle
                cx="15"
                cy="15"
                r="15"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="15;9;15"
                    attributeName="r"
                    from="15"
                    to="15"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.5;1"
                    attributeName="fill-opacity"
                    from="1"
                    to="1"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="60"
                cy="15"
                r="9"
                fill-opacity="0.3"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="9;15;9"
                    attributeName="r"
                    from="9"
                    to="9"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
                HTMLOpenTaganimate
                    values=".5;1;.5"
                    attributeName="fill-opacity"
                    from="0.5"
                    to="0.5"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="105"
                cy="15"
                r="15"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="15;9;15"
                    attributeName="r"
                    from="15"
                    to="15"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.5;1"
                    attributeName="fill-opacity"
                    from="1"
                    to="1"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-danger border-danger text-white dark:border-danger"
HTMLCloseTagحذف
                                                        HTMLOpenTagspan class="rtl:mr-2 ltr:ml-2 h-4 w-4"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="25"
            viewBox="0 0 44 44"
            xmlns="http://www.w3.org/2000/svg"
            stroke="white"
        HTMLCloseTag
            HTMLOpenTagg
                fill="none"
                fill-rule="evenodd"
                stroke-width="4"
            HTMLCloseTag
                HTMLOpenTagcircle
                    cx="22"
                    cy="22"
                    r="1"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="1; 20"
                        attributeName="r"
                        begin="0s"
                        dur="1.8s"
                        calcMode="spline"
                        keyTimes="0; 1"
                        keySplines="0.165, 0.84, 0.44, 1"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                    HTMLOpenTaganimate
                        values="1; 0"
                        attributeName="stroke-opacity"
                        begin="0s"
                        dur="1.8s"
                        calcMode="spline"
                        keyTimes="0; 1"
                        keySplines="0.3, 0.61, 0.355, 1"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                HTMLOpenTag/circleHTMLCloseTag
                HTMLOpenTagcircle
                    cx="22"
                    cy="22"
                    r="1"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="1; 20"
                        attributeName="r"
                        begin="-0.9s"
                        dur="1.8s"
                        calcMode="spline"
                        keyTimes="0; 1"
                        keySplines="0.165, 0.84, 0.44, 1"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                    HTMLOpenTaganimate
                        values="1; 0"
                        attributeName="stroke-opacity"
                        begin="-0.9s"
                        dur="1.8s"
                        calcMode="spline"
                        keyTimes="0; 1"
                        keySplines="0.3, 0.61, 0.355, 1"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTag/gHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

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

دکمه‌های گرد

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary rounded-full w-24 w-24"
HTMLCloseTagاصلیHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 rounded-full w-24 w-24"
HTMLCloseTagثانویHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-slate-900 dark:border-success rounded-full w-24 w-24"
HTMLCloseTagموفقیتHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-warning border-warning text-slate-900 dark:border-warning rounded-full w-24 w-24"
HTMLCloseTagاخطارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-pending border-pending text-white dark:border-pending rounded-full w-24 w-24"
HTMLCloseTagدر انتظارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-danger border-danger text-white dark:border-danger rounded-full w-24 w-24"
HTMLCloseTagخطرHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70 rounded-full w-24 w-24"
HTMLCloseTagتیرهHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

در نظر بگیرید که از دکمه‌های گرد برای اعمال مختلف، مانند اعمال اولیه، اعمال ثانویه، اعلان‌های موفقیت، و موارد دیگر، برای اعمال اولیه، اعمال ثانویه، اعلان‌های موفقیت، و موارد دیگر، برای اعمال اولیه، اعمال ثانویه، اعلان‌های موفقیت، و موارد دیگر، برای

دکمه‌های رنگ‌های نرم

دکمه‌های رنگی نرم لمسی از شیکی و ظرافت به رابط کاربری شما اضافه می‌کنند. این دکمه‌ها از رنگ‌های نرم و آرامی استفاده می‌کنند که به چشم می‌آیند بدون آنکه زیادی غلظت داشته باشند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary [&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10 [&:hover:not(:disabled)]:dark:border-opacity-60 rounded-full w-24 w-24"
HTMLCloseTagاصلیHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-slate-300 border-secondary bg-opacity-20 text-slate-500 dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300 [&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 [&:hover:not(:disabled)]:dark:border-darkmode-100/20 rounded-full w-24 w-24"
HTMLCloseTagثانویHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success bg-opacity-20 border-opacity-5 text-success dark:border-success dark:border-opacity-20 [&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10 rounded-full w-24 w-24"
HTMLCloseTagموفقیتHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning dark:border-warning dark:border-opacity-20 [&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10 rounded-full w-24 w-24"
HTMLCloseTagاخطارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending dark:border-pending dark:border-opacity-20 [&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10 rounded-full w-24 w-24"
HTMLCloseTagدر انتظارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger dark:border-danger dark:border-opacity-20 [&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10 rounded-full w-24 w-24"
HTMLCloseTagخطرHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed 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 [&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10 [&:hover:not(:disabled)]:dark:bg-darkmode-800/50 [&:hover:not(:disabled)]:dark:border-darkmode-800 rounded-full w-24 w-24"
HTMLCloseTagتیرهHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

دکمه‌های رنگی نرم یک گزینه ظریف اما لمس بصری برای عناصر رابط کاربری شما فراهم می‌کنند. رنگ‌های نرم آن‌ها می‌تواند ظاهر رابط کاربری شما را بهبود بخشد بدون اینکه کاربر را بیش از حد متاثر کند. گزینه‌ی جذاب برای عناصر رابط کاربری شما هستند. رنگ‌های نرم آن‌ها می‌تواند ظاهر رابط کاربری شما را بهبود بخشد بدون اینکه کاربر را بیش از حد متاثر کند. گزینه‌ی جذاب برای عناصر رابط کاربری شما هستند. رنگ‌های نرم آن‌ها می‌تواند ظاهر رابط کاربری شما را بهبود بخشد بدون اینکه کاربر را بیش از حد متاثر کند. کاربر را بیش از حد متاثر کند.

دکمه‌های آیکون‌دار

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-32 w-32"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="activity"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        فعالیتHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 w-32 w-32"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="hard-drive"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        دیسک سختHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-slate-900 dark:border-success w-32 w-32"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="calendar"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        تقویمHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-warning border-warning text-slate-900 dark:border-warning w-32 w-32"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="share2"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        اشتراک گذاریHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-pending border-pending text-white dark:border-pending w-32 w-32"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="download"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        در انتظارHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-danger border-danger text-white dark:border-danger w-32 w-32"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="trash"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        زبالهHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70 w-32 w-32"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="image"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        ImageHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

در نظر بگیرید که از دکمه‌های آیکون برای ساده‌سازی تعاملات کاربر، بیان معنی به یک نگاه، و ایجاد یک رابط کاربری بیشتر به سمت بینایی برای مخاطبان خود استفاده کنید. تعاملات کاربر، بیان معنی به یک نگاه، و ایجاد یک رابط کاربری بیشتر به سمت بینایی برای مخاطبان خود استفاده کنید. بیشتر به سمت بینایی برای مخاطبان خود استفاده کنید.

دکمه‌های فقط با آیکون

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-wrap items-center gap-2"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="activity"
    class="stroke-[1] w-5 h-5 h-5 w-5 h-5 w-5"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="hard-drive"
    class="stroke-[1] w-5 h-5 h-5 w-5 h-5 w-5"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-slate-900 dark:border-success"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="calendar"
    class="stroke-[1] w-5 h-5 h-5 w-5 h-5 w-5"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-warning border-warning text-slate-900 dark:border-warning"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="share2"
    class="stroke-[1] w-5 h-5 h-5 w-5 h-5 w-5"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-pending border-pending text-white dark:border-pending"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="download"
    class="stroke-[1] w-5 h-5 h-5 w-5 h-5 w-5"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-danger border-danger text-white dark:border-danger"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="trash"
    class="stroke-[1] w-5 h-5 h-5 w-5 h-5 w-5"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="image"
    class="stroke-[1] w-5 h-5 h-5 w-5 h-5 w-5"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

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

رابط اجزاء

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

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

دکمه
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML برای دکمه (پیش‌فرض ("دکمه" یا "لینک")
`size` `Size` اندازه دکمه ("sm" یا "lg")
`variant` `Variant` نوعی از سبک دکمه
`elevated` `boolean` نشان می‌دهد که آیا دکمه دارای سایه بلند می‌باشد یا خیر
`rounded` `boolean` نشان می‌دهد که دکمه گرد می‌باشد یا خیر