YNEX - Tailwind Admin Template

Default Buttons


    <div class="ti-btn-list space-x-2 rtl:space-x-reverse">
        <button type="button" class="ti-btn ti-btn-primary-full ti-btn-wave">Primary</button>
        <button type="button" class="ti-btn ti-btn-secondary-full ti-btn-wave">Secondary</button>
        <button type="button" class="ti-btn ti-btn-success-full ti-btn-wave">Success</button>
        <button type="button" class="ti-btn ti-btn-danger-full ti-btn-wave">Danger</button>
        <button type="button" class="ti-btn ti-btn-warning-full ti-btn-wave">Warning</button>
        <button type="button" class="ti-btn ti-btn-info-full ti-btn-wave">Info</button>
        <button type="button" class="ti-btn ti-btn-light ti-btn-wave">Light</button>
        <button type="button" class="ti-btn ti-btn-dark ti-btn-wave text-white">Dark</button>
        <button type="button" class="ti-btn ti-btn-link ti-btn-wave">Link</button>
    </div>

Rounded Buttons

<div class="ti-btn-list space-x-2 rtl:space-x-reverse">
    <button type="button" class="ti-btn ti-btn-primary-full !rounded-full ti-btn-wave">Primary</button>
    <button type="button" class="ti-btn ti-btn-secondary-full !rounded-full ti-btn-wave">Secondary</button>
    <button type="button" class="ti-btn ti-btn-success-full !rounded-full ti-btn-wave">Success</button>
    <button type="button" class="ti-btn ti-btn-danger-full !rounded-full ti-btn-wave">Danger</button>
    <button type="button" class="ti-btn ti-btn-warning-full !rounded-full ti-btn-wave">Warning</button>
    <button type="button" class="ti-btn ti-btn-info-full !rounded-full ti-btn-wave">Info</button>
    <button type="button" class="ti-btn ti-btn-light !rounded-full ti-btn-wave">Light</button>
    <button type="button" class="ti-btn ti-btn-dark !rounded-full ti-btn-wave text-white">Dark</button>
    <button type="button" class="ti-btn ti-btn-link !rounded-full ti-btn-wave">Link</button>
</div>

Light Buttons

<div class="ti-btn-list space-x-2 rtl:space-x-reverse">
    <button type="button" class="ti-btn ti-btn-primary ti-btn-wave">Primary</button>
    <button type="button" class="ti-btn ti-btn-secondary ti-btn-wave">Secondary</button>
    <button type="button" class="ti-btn ti-btn-success ti-btn-wave">Success</button>
    <button type="button" class="ti-btn ti-btn-danger ti-btn-wave">Danger</button>
    <button type="button" class="ti-btn ti-btn-warning ti-btn-wave">Warning</button>
    <button type="button" class="ti-btn ti-btn-info ti-btn-wave">Info</button>
    <button type="button" class="ti-btn ti-btn-purple ti-btn-wave">purple</button>
    <button type="button" class="ti-btn ti-btn-teal ti-btn-wave">teal</button>
    <button type="button" class="ti-btn ti-btn-orange ti-btn-wave">orange</button>
</div>

Light Rounded Buttons

<div class="ti-btn-list space-x-2 rtl:space-x-reverse">
    <button type="button" class="ti-btn ti-btn-primary !rounded-full ti-btn-wave">Primary</button>
    <button type="button" class="ti-btn ti-btn-secondary !rounded-full ti-btn-wave">Secondary</button>
    <button type="button" class="ti-btn ti-btn-success !rounded-full ti-btn-wave">Success</button>
    <button type="button" class="ti-btn ti-btn-danger !rounded-full ti-btn-wave">Danger</button>
    <button type="button" class="ti-btn ti-btn-warning !rounded-full ti-btn-wave">Warning</button>
    <button type="button" class="ti-btn ti-btn-info !rounded-full ti-btn-wave">Info</button>
    <button type="button" class="ti-btn ti-btn-purple !rounded-full ti-btn-wave">purple</button>
    <button type="button" class="ti-btn ti-btn-teal !rounded-full ti-btn-wave">teal</button>
    <button type="button" class="ti-btn ti-btn-orange !rounded-full ti-btn-wave">orange</button>
</div>

Outline Buttons


    <div class="ti-btn-list space-x-2 rtl:space-x-reverse">
        <button type="button" class="ti-btn ti-btn-outline-primary ti-btn-wave">Primary</button>
        <button type="button" class="ti-btn ti-btn-outline-secondary ti-btn-wave">Secondary</button>
        <button type="button" class="ti-btn ti-btn-outline-success ti-btn-wave">Success</button>
        <button type="button" class="ti-btn ti-btn-outline-danger ti-btn-wave">Danger</button>
        <button type="button" class="ti-btn ti-btn-outline-warning ti-btn-wave">Warning</button>
        <button type="button" class="ti-btn ti-btn-outline-info ti-btn-wave">Info</button>
        <button type="button" class="ti-btn ti-btn-outline-light ti-btn-wave">Light</button>
        <button type="button" class="ti-btn ti-btn-outline-dark ti-btn-wave">Dark</button>
    </div>

Rounded Outline Buttons


    <div class="ti-btn-list space-x-2 rtl:space-x-reverse">
        <button type="button" class="ti-btn ti-btn-outline-primary !rounded-full ti-btn-wave">Primary</button>
        <button type="button" class="ti-btn ti-btn-outline-secondary !rounded-full ti-btn-wave">Secondary</button>
        <button type="button" class="ti-btn ti-btn-outline-success !rounded-full ti-btn-wave">Success</button>
        <button type="button" class="ti-btn ti-btn-outline-danger !rounded-full ti-btn-wave">Danger</button>
        <button type="button" class="ti-btn ti-btn-outline-warning !rounded-full ti-btn-wave">Warning</button>
        <button type="button" class="ti-btn ti-btn-outline-info !rounded-full ti-btn-wave">Info</button>
        <button type="button" class="ti-btn ti-btn-outline-light !rounded-full ti-btn-wave">Light</button>
        <button type="button" class="ti-btn ti-btn-outline-dark !rounded-full ti-btn-wave">Dark</button>
    </div>

Gradient Buttons


    <div class="ti-btn-list space-x-2 rtl:space-x-reverse">
        <button type="button" class="ti-btn ti-btn-primary-gradient ti-btn-wave">Primary</button>
        <button type="button" class="ti-btn ti-btn-secondary-gradient ti-btn-wave">Secondary</button>
        <button type="button" class="ti-btn ti-btn-success-gradient ti-btn-wave">Success</button>
        <button type="button" class="ti-btn ti-btn-danger-gradient ti-btn-wave">Danger</button>
        <button type="button" class="ti-btn ti-btn-warning-gradient ti-btn-wave">Warning</button>
        <button type="button" class="ti-btn ti-btn-info-gradient ti-btn-wave">Info</button>
        <button type="button" class="ti-btn ti-btn-orange-gradient ti-btn-wave">Orange</button>
        <button type="button" class="ti-btn ti-btn-purple-gradient ti-btn-wave">Purple</button>
        <button type="button" class="ti-btn ti-btn-teal-gradient ti-btn-wave">Teal</button>
    </div>

Rounded Gradient Buttons

<div class="ti-btn-list space-x-2 rtl:space-x-reverse">
    <button type="button" class="ti-btn ti-btn-primary-gradient !rounded-full ti-btn-wave">Primary</button>
    <button type="button" class="ti-btn ti-btn-secondary-gradient !rounded-full ti-btn-wave">Secondary</button>
    <button type="button" class="ti-btn ti-btn-success-gradient !rounded-full ti-btn-wave">Success</button>
    <button type="button" class="ti-btn ti-btn-danger-gradient !rounded-full ti-btn-wave">Danger</button>
    <button type="button" class="ti-btn ti-btn-warning-gradient !rounded-full ti-btn-wave">Warning</button>
    <button type="button" class="ti-btn ti-btn-info-gradient !rounded-full ti-btn-wave">Info</button>
    <button type="button" class="ti-btn ti-btn-orange-gradient !rounded-full ti-btn-wave">Orange</button>
    <button type="button" class="ti-btn ti-btn-purple-gradient !rounded-full ti-btn-wave">Purple</button>
    <button type="button" class="ti-btn ti-btn-teal-gradient !rounded-full ti-btn-wave">Teal</button>
</div>

Ghost Buttons

<div class="ti-btn-list space-x-2 rtl:space-x-reverse">
    <button type="button" class="ti-btn ti-btn-ghost-primary ti-btn-wave">Primary</button>
    <button type="button" class="ti-btn ti-btn-ghost-secondary ti-btn-wave">Secondary</button>
    <button type="button" class="ti-btn ti-btn-ghost-success ti-btn-wave">Success</button>
    <button type="button" class="ti-btn ti-btn-ghost-danger ti-btn-wave">Danger</button>
    <button type="button" class="ti-btn ti-btn-ghost-warning ti-btn-wave">Warning</button>
    <button type="button" class="ti-btn ti-btn-ghost-info ti-btn-wave">Info</button>
    <button type="button" class="ti-btn ti-btn-ghost-orange ti-btn-wave">Orange</button>
    <button type="button" class="ti-btn ti-btn-ghost-purple ti-btn-wave">Purple</button>
    <button type="button" class="ti-btn ti-btn-ghost-teal ti-btn-wave">Teal</button>
</div>

Rounded Ghost Buttons

<div class="ti-btn-list space-x-2 rtl:space-x-reverse">
    <button type="button" class="ti-btn ti-btn-ghost-primary !rounded-full ti-btn-wave">Primary</button>
    <button type="button" class="ti-btn ti-btn-ghost-secondary !rounded-full ti-btn-wave">Secondary</button>
    <button type="button" class="ti-btn ti-btn-ghost-success !rounded-full ti-btn-wave">Success</button>
    <button type="button" class="ti-btn ti-btn-ghost-danger !rounded-full ti-btn-wave">Danger</button>
    <button type="button" class="ti-btn ti-btn-ghost-warning !rounded-full ti-btn-wave">Warning</button>
    <button type="button" class="ti-btn ti-btn-ghost-info !rounded-full ti-btn-wave">Info</button>
    <button type="button" class="ti-btn ti-btn-ghost-orange !rounded-full ti-btn-wave">Orange</button>
    <button type="button" class="ti-btn ti-btn-ghost-purple !rounded-full ti-btn-wave">Purple</button>
    <button type="button" class="ti-btn ti-btn-ghost-teal !rounded-full ti-btn-wave">Teal</button>
</div>

Button tags

Link

<div class="ti-btn-list space-x-2 rtl:space-x-reverse">
    <a class="ti-btn ti-btn-primary-full ti-btn-wave" href="javascript:void(0);">Link</a>
    <button class="ti-btn ti-btn-secondary-full ti-btn-wave" type="submit">Button</button>
    <input class="ti-btn ti-btn-info-full" type="button" value="Input">
    <input class="ti-btn ti-btn-warning-full" type="button" value="Submit">
    <input class="ti-btn ti-btn-success-full" type="button" value="Reset">
</div>

disabled state with anchor tags

Primary link Link


    <div class="ti-btn-list flex">
        <div class="mb-4">
            <button type="button" class="ti-btn ti-btn-primary-full ti-btn-disabled">Primary
                button</button>
            <button type="button" class="ti-btn ti-btn-secondary-full ti-btn-disabled">Button</button>
            <button type="button" class="ti-btn ti-btn-outline-primary ti-btn-disabled">Primary
                button</button>
            <button type="button" class="ti-btn ti-btn-outline-secondary ti-btn-disabled">Button</button>
        </div>

        <div>
            <a class="ti-btn ti-btn-primary ti-btn-disabled" aria-disabled="true">Primary
                link</a>
            <a class="ti-btn ti-btn-secondary ti-btn-disabled" aria-disabled="true">Link</a>
        </div>
    </div>

Loading Buttons


    <div class="ti-btn-list md:flex flex-wrap">
        <button type="button" class="ti-btn ti-btn-primary-full ti-btn-loader m-2">
            <span class="me-2">Loading</span>
            <span class="loading"><i class="ri-loader-2-fill text-[1rem] animate-spin"></i></span>
        </button>
        <button type="button" class="ti-btn ti-btn-outline-secondary ti-btn-loader m-2">
            <span class="me-2">Loading</span>
            <span class="loading"><i class="ri-loader-2-fill text-[1rem] animate-spin"></i></span>
        </button>
        <button type="button" class="ti-btn bg-info/10 text-info ti-btn-loader m-2">
            <span class="me-2">Loading</span>
            <span class="loading"><i class="ri-loader-4-line text-[1rem] animate-spin"></i></span>
        </button>
        <button type="button" class="ti-btn bg-warning/10 text-warning ti-btn-loader m-2">
            <span class="me-2">Loading</span>
            <span class="loading"><i class="ri-loader-5-line text-[1rem] animate-spin"></i></span>
        </button>
        <button type="button" class="ti-btn ti-btn-success-full ti-btn-loader ti-btn-disabled m-2">
            <span class="me-2">Disabled</span>
            <span class="loading"><i class="ri-refresh-line text-[1rem] animate-spin"></i></span>
        </button>
    </div>

Icon Buttons


    <div class="ti-btn-list md:flex block">
        <div class="md:mb-0 mb-2">
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-primary-full ti-btn-wave">
                <i class="ri-bank-fill"></i>
            </button>
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-info-full ti-btn-wave">
                <i class="ri-medal-line"></i>
            </button>
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-danger-full ti-btn-wave">
                <i class="ri-archive-line"></i>
            </button>
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-warning-full ti-btn-wave me-5">
                <i class="ri-calendar-2-line"></i>
            </button>
        </div>
        <div class="md:mb-0 mb-2">
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon bg-primary/10 text-primary !border hover:bg-primary hover:text-white !rounded-full ti-btn-wave">
                <i class="ri-home-smile-line"></i>
            </button>
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon bg-secondary/10 text-secondary hover:bg-secondary hover:text-white !rounded-full ti-btn-wave">
                <i class="ri-delete-bin-line"></i>
            </button>
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon bg-success/10 text-success hover:bg-success hover:text-white !rounded-full ti-btn-wave">
                <i class="ri-notification-3-line"></i>
            </button>
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon bg-danger/10 text-danger hover:bg-danger hover:text-white !rounded-full ti-btn-wave me-5">
                <i class="ri-chat-settings-line"></i>
            </button>
        </div>
        <div class="">
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-outline-primary !rounded-full ti-btn-wave">
                <i class="ri-phone-line"></i>
            </button>
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-outline-teal !border-teal !text-teal !rounded-full ti-btn-wave">
                <i class="ri-customer-service-2-line"></i>
            </button>
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-outline-success !rounded-full ti-btn-wave">
                <i class="ri-live-line"></i>
            </button>
            <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-outline-secondary !rounded-full ti-btn-wave">
                <i class="ri-save-line"></i>
            </button>
        </div>
    </div>

Social Buttons


    <div class="ti-btn-list space-x-2 rtl:space-x-reverse">
        <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-facebook ti-btn-wave">
            <i class="ri-facebook-line"></i>
        </button>
        <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-twitter ti-btn-wave">
            <i class="ri-twitter-line"></i>
        </button>
        <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-instagram ti-btn-wave">
            <i class="ri-instagram-line"></i>
        </button>
        <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-github ti-btn-wave">
            <i class="ri-github-line"></i>
        </button>
        <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-youtube ti-btn-wave">
            <i class="ri-youtube-line"></i>
        </button>
        <button type="button" aria-label="button" class="ti-btn ti-btn-icon ti-btn-google ti-btn-wave">
            <i class="ri-google-line"></i>
        </button>
    </div>

Sizes

<div class="ti-btn-list space-x-2 rtl:space-x-reverse">
    <button type="button" class="ti-btn ti-btn-primary-full !py-1 !px-2 ti-btn-wave">Small
        button</button>
    <button type="button" class="ti-btn ti-btn-secondary-full ti-btn-wave">Default
        button</button>
    <button type="button" class="ti-btn ti-btn-success-full ti-btn-lg ti-btn-wave">Large
        button</button>
</div>

Button Widths

<div class="ti-btn-list space-x-2 rtl:space-x-reverse">
    <button type="button" class="ti-btn ti-btn-primary-full ti-btn-w-xs ti-btn-wave">XS</button>
    <button type="button" class="ti-btn ti-btn-secondary-full ti-btn-w-sm ti-btn-wave">SM</button>
    <button type="button" class="ti-btn ti-btn-warning-full ti-btn-w-md ti-btn-wave">MD</button>
    <button type="button" class="ti-btn ti-btn-info-full ti-btn-w-lg ti-btn-wave">LG</button>
</div>

Buttons With Different Shadows


    <div class="ti-btn-list flex">
        <div class="me-[3rem]">
            <button type="button" class="ti-btn ti-btn-primary-full shadow-sm ti-btn-wave">Button</button>
            <button type="button" class="ti-btn ti-btn-primary-full shadow ti-btn-wave">Button</button>
            <button type="button" class="ti-btn ti-btn-primary-full shadow-lg ti-btn-wave">Button</button>
        </div>
        <div>
            <button type="button" class="ti-btn ti-btn-secondary-full !py-1 !px-2 shadow-sm ti-btn-wave">Button</button>
            <button type="button" class="ti-btn ti-btn-info-full shadow ti-btn-wave">Button</button>
            <button type="button" class="ti-btn ti-btn-lg ti-btn-success-full shadow-lg ti-btn-wave">Button</button>
        </div>
    </div>

Different Colored Buttons With Shadows

<div class="ti-btn-list space-x-2 rtl:space-x-reverse">
    <button type="button" class="ti-btn ti-btn-primary-full shadow-primary ti-btn-wave">Button</button>
    <button type="button" class="ti-btn ti-btn-secondary-full shadow-secondary ti-btn-wave">Button</button>
    <button type="button" class="ti-btn ti-btn-success-full shadow-success ti-btn-wave">Button</button>
    <button type="button" class="ti-btn ti-btn-info-full shadow-info ti-btn-wave">Button</button>
    <button type="button" class="ti-btn ti-btn-warning-full shadow-warning ti-btn-wave">Button</button>
    <button type="button" class="ti-btn ti-btn-danger-full shadow-danger ti-btn-wave">Button</button>
    <button type="button" class="ti-btn ti-btn-purple-full shadow-purple ti-btn-wave">Button</button>
    <button type="button" class="ti-btn ti-btn-orange-full shadow-orange ti-btn-wave">Button</button>
</div>

Label Buttons


    <div class="ti-btn-list space-x-2 rtl:space-x-reverse">
        <button type="button" class="ti-btn ti-btn-primary-full label-ti-btn">
            <i class="ri-chat-smile-line label-ti-btn-icon  me-2"></i>
            Primary
        </button>
        <button type="button" class="ti-btn ti-btn-secondary-full label-ti-btn">
            <i class="ri-settings-4-line label-ti-btn-icon me-2"></i>
            Secondary
        </button>
        <button type="button" class="ti-btn ti-btn-warning-full label-ti-btn !rounded-full">
            <i class="ri-spam-2-line label-ti-btn-icon me-2 !rounded-full"></i>
            Warning
        </button>
        <button type="button" class="ti-btn ti-btn-info-full label-ti-btn !rounded-full">
            <i class="ri-phone-line label-ti-btn-icon me-2 !rounded-full"></i>
            Info
        </button>
        <button type="button" class="ti-btn ti-btn-success-full label-ti-btn label-end">
            <i class="ri-thumb-up-line label-ti-btn-icon ms-2"></i>
            Success
        </button>
        <button type="button" class="ti-btn ti-btn-danger-full label-ti-btn label-end !rounded-full">
            <i class="ri-close-line label-ti-btn-icon ms-2 !rounded-full"></i>
            Cancel
        </button>
    </div>

Custom Buttons

<div class="ti-btn-list space-x-2 rtl:space-x-reverse">
    <button type="button" class="ti-btn ti-btn-info-full custom-button !rounded-full">
        <span class="custom-ti-btn-icons"><i class="ri-twitter-line text-info"></i></span>
        Twitter
    </button>
    <button type="button" class="ti-btn ti-btn-teal ti-btn-border-down border-0">Border</button>
    <button type="button" class="ti-btn ti-btn-secondary ti-btn-border-start">Border</button>
    <button type="button" class="ti-btn ti-btn-purple ti-btn-border-end">Border</button>
    <button type="button" class="ti-btn ti-btn-warning ti-btn-border-top">Border</button>
    <button type="button" class="ti-btn ti-btn-danger-full ti-btn-hover ti-btn-hover-animate">Like</button>
    <button type="button" class="ti-btn ti-btn-success-full ti-btn-darken-hover">Hover</button>
    <button type="button" class="ti-btn ti-btn-orange-full ti-btn-custom-border">Hover</button>
</div>

Block buttons


    <div class="ti-btn-list space-x-2 rtl:space-x-reverse">
        <div class="grid  gap-2 mb-6">
            <button class="ti-btn ti-btn-primary-full ti-btn-wave" type="button">Button</button>
            <button class="ti-btn ti-btn-secondary-full ti-btn-wave" type="button">Button</button>
        </div>
        <div class="grid gap-2 md:block">
            <button class="ti-btn ti-btn-info-full ti-btn-wave" type="button">Button</button>
            <button class="ti-btn ti-btn-success-full ti-btn-wave" type="button">Button</button>
        </div>
        <div class="grid !mx-auto gap-2 w-[50%] ">
            <button class="ti-btn ti-btn-danger-full ti-btn-wave" type="button">Button</button>
            <button class="ti-btn ti-btn-warning-full ti-btn-wave" type="button">Button</button>
        </div>
        <div class="grid gap-2 md:flex md:justify-end">
            <button class="ti-btn ti-btn-teal-full md:me-2 ti-btn-wave" type="button">Button</button>
            <button class="ti-btn ti-btn-purple-full ti-btn-wave" type="button">Button</button>
        </div>
    </div>

Switcher

Buttons