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

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

کد / پیش‌نمایش نمونه
            
                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
            
        

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

رابط اجزاء

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

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

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