Themes
Choose your theme
rubick
icewall
tinker
enigma
Layouts
Choose your layout
side menu
simple menu
top menu
Accent Colors
Choose your accent color
Appearance
Choose your appearance
Light
Dark
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Al Pacino
alpacino@left4code.com
Kevin Spacey
kevinspacey@left4code.com
Russell Crowe
russellcrowe@left4code.com
Angelina Jolie
angelinajolie@left4code.com
Products
Nike Tanjun
Sport & Outdoor
Samsung Galaxy S20 Ultra
Smartphone & Tablet
Samsung Galaxy S20 Ultra
Smartphone & Tablet
Samsung Galaxy S20 Ultra
Smartphone & Tablet

## Buttons

## Basic Buttons

Show example code

                    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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagPrimaryHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSecondaryHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSuccessHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagWarningHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagPendingHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagDangerHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

## Button Sizes

Show example code

                    HTMLOpenTagdivHTMLCloseTag
                                    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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSmallHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagMediumHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagLargeHTMLOpenTag/buttonHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-5"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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSmallHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagMediumHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagLargeHTMLOpenTag/buttonHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Working with Links

Show example code
Link Button Input Submit Pending Reset Metal

                    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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagLinkHTMLOpenTag/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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagButtonHTMLOpenTag/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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagSubmitHTMLOpenTag/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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagPendingHTMLOpenTag/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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagResetHTMLOpenTag/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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagMetalHTMLOpenTag/aHTMLCloseTag

## Elevated Buttons

Show example code

                    HTMLOpenTagdivHTMLCloseTag
                                    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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagPrimaryHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSecondaryHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSuccessHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagWarningHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagPendingHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagDangerHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-5"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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagPrimaryHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSecondaryHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSuccessHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagWarningHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagPendingHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagDangerHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Social Media Buttons

Show example code

                    HTMLOpenTagdiv class="flex flex-wrap"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] mb-2 mr-2 w-32 mb-2 mr-2 w-32"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="facebook"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        FacebookHTMLOpenTag/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] mb-2 mr-2 w-32 mb-2 mr-2 w-32"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="twitter"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        TwitterHTMLOpenTag/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] mb-2 mr-2 w-32 mb-2 mr-2 w-32"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="instagram"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        InstagramHTMLOpenTag/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] mb-2 mr-2 w-32 mb-2 mr-2 w-32"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="linkedin"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        LinkedinHTMLOpenTag/buttonHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Outline Buttons

Show example code

                    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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagPrimaryHTMLOpenTag/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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagSecondaryHTMLOpenTag/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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagSuccessHTMLOpenTag/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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagWarningHTMLOpenTag/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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagPendingHTMLOpenTag/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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagDangerHTMLOpenTag/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 mb-2 mr-1 inline-block w-24 mb-2 mr-1 inline-block w-24"
    HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

## Loading State Buttons

Show example code

                    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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagSaving
                                    HTMLOpenTagspan class="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="#ffffff"
            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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagAdding
                                    HTMLOpenTagspan class="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="#ffffff"
                        stroke-width="1.5"
                    HTMLCloseTag
                        HTMLOpenTagcircle
                            cx="42.601"
                            cy="11.462"
                            r="5"
                            fill-opacity="1"
                            fill="#ffffff"
                        HTMLCloseTag
                            HTMLOpenTaganimate
                                values="1;0;0;0;0;0;0;0"
                                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="#ffffff"
                        HTMLCloseTag
                            HTMLOpenTaganimate
                                values="0;1;0;0;0;0;0;0"
                                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="#ffffff"
                        HTMLCloseTag
                            HTMLOpenTaganimate
                                values="0;0;1;0;0;0;0;0"
                                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="#ffffff"
                        HTMLCloseTag
                            HTMLOpenTaganimate
                                values="0;0;0;1;0;0;0;0"
                                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="#ffffff"
                        HTMLCloseTag
                            HTMLOpenTaganimate
                                values="0;0;0;0;1;0;0;0"
                                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="#ffffff"
                        HTMLCloseTag
                            HTMLOpenTaganimate
                                values="0;0;0;0;0;1;0;0"
                                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="#ffffff"
                        HTMLCloseTag
                            HTMLOpenTaganimate
                                values="0;0;0;0;0;0;1;0"
                                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="#ffffff"
                        HTMLCloseTag
                            HTMLOpenTaganimate
                                values="0;0;0;0;0;0;0;1"
                                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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagLoading
                                    HTMLOpenTagspan class="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="#ffffff"
            HTMLCloseTag
                HTMLOpenTagcircle
                    cx="15"
                    cy="15"
                    r="15"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="15;9;15"
                        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"
                        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"
                        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"
                        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"
                        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"
                        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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagDeleting
                                    HTMLOpenTagspan class="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="#ffffff"
            HTMLCloseTag
                HTMLOpenTagg
                    fill="none"
                    fill-rule="evenodd"
                    stroke-width="4"
                HTMLCloseTag
                    HTMLOpenTagcircle
                        cx="22"
                        cy="22"
                        r="1"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="1; 20"
                            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"
                            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"
                            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"
                            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

## Rounded Buttons

Show example code

                    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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagPrimaryHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSecondaryHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSuccessHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagWarningHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagPendingHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagDangerHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

## Soft Color Buttons

Show example code

                    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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagPrimaryHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSecondaryHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagSuccessHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagWarningHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagPendingHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagDangerHTMLOpenTag/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 mb-2 mr-1 w-24 mb-2 mr-1 w-24"
    HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

## Icon Buttons

Show example code

                    HTMLOpenTagdiv class="flex flex-wrap"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 mb-2 mr-2 w-32 mb-2 mr-2 w-32"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="activity"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        ActivityHTMLOpenTag/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 mb-2 mr-2 w-32 mb-2 mr-2 w-32"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="hard-drive"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        Hard DriveHTMLOpenTag/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 mb-2 mr-2 w-32 mb-2 mr-2 w-32"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="calendar"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        CalendarHTMLOpenTag/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 mb-2 mr-2 w-32 mb-2 mr-2 w-32"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="share"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
     ShareHTMLOpenTag/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 mb-2 mr-2 w-32 mb-2 mr-2 w-32"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="download"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        PendingHTMLOpenTag/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 mb-2 mr-2 w-32 mb-2 mr-2 w-32"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="trash"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
     TrashHTMLOpenTag/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 mb-2 mr-2 w-32 mb-2 mr-2 w-32"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="image"
        class="stroke-1.5 w-5 h-5 mr-2 h-4 w-4 mr-2 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
     ImageHTMLOpenTag/buttonHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Icon Only Buttons

Show example code

                    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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="activity"
        class="stroke-1.5 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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="hard-drive"
        class="stroke-1.5 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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="calendar"
        class="stroke-1.5 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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="share"
        class="stroke-1.5 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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="download"
        class="stroke-1.5 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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="trash"
        class="stroke-1.5 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 mb-2 mr-1 mb-2 mr-1"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="image"
        class="stroke-1.5 w-5 h-5 h-5 w-5 h-5 w-5"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag