Buttons

Tailwind CSS and Alpine JS Button

Buttons are a fundamental element of any user interface. Users can use them to trigger actions, such as submitting a form, opening a modal, or navigating to another page.

Default Button

Buttons with a solid background, you can use them to draw attention to the most important actions you want users to take.

Disabled

HTML

<!-- primary Button -->
<button type="button" ="">Primary</button>

<!-- secondary Button -->
<button type="button" ="">Secondary</button>

<!-- alternate Button -->
<button type="button" ="">Alternate</button>

<!-- inverse Button -->
<button type="button" ="">Inverse</button>

<!-- info Button -->
<button type="button" ="">Info</button>

<!-- danger Button -->
<button type="button" ="">Danger</button>

<!-- warning Button -->
<button type="button" ="">Warning</button>

<!-- success Button -->
<button type="button" ="">Success</button>

Outline Button

Buttons defined by a border rather than a solid background. You can use them to emphasize alternative or less critical actions without overwhelming the user interface.

Disabled

HTML

<!-- primary Outline Button -->
<button type="button" ="">Primary</button>

<!-- secondary Outline Button -->
<button type="button" ="">Secondary</button>

<!-- alternate Outline Button -->
<button type="button" ="">Alternate</button>

<!-- inverse Outline Button -->
<button type="button" ="">Inverse</button>

<!-- info Outline Button -->
<button type="button" ="">Info</button>

<!-- danger Outline Button -->
<button type="button" ="">Danger</button>

<!-- warning Outline Button -->
<button type="button" ="">Warning</button>

<!-- success Outline Button -->
<button type="button" ="">Success</button>

Ghost Button

Transparent buttons with text, you can use them to create subtle calls to action and maintain a minimalist aesthetic.

Disabled

HTML

<!-- primary Ghost Button -->
<button type="button" ="">Primary</button>

<!-- secondary Ghost Button -->
<button type="button" ="">Secondary</button>

<!-- alternate Ghost Button -->
<button type="button" ="">Alternate</button>

<!-- inverse Ghost Button -->
<button type="button" ="">Inverse</button>

<!-- info Ghost Button -->
<button type="button" ="">Info</button>

<!-- danger Ghost Button -->
<button type="button" ="">Danger</button>

<!-- warning Ghost Button -->
<button type="button" ="">Warning</button>

<!-- success Ghost Button -->
<button type="button" ="">Success</button>

Button with Icon

Buttons with icons provide a visual cue for users to better understand the functionality of the button. You can use them to make the functionality of the button more explicit.

Disabled

HTML

<!-- primary Button with Icon -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- secondary Button with Icon -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- alternate Button with Icon -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- inverse Button with Icon -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- info Button with Icon -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- danger Button with Icon -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- warning Button with Icon -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- success Button with Icon -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

Floating Action Button (FAB)

Circular buttons with icons, typically placed at the bottom of a screen, you can use them to highlight the most important action on a specific screen.

Disabled

HTML

<!-- primary Floating Button -->
<button aria-label="create something epic" type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- secondary Floating Button -->
<button aria-label="create something epic" type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- alternate Floating Button -->
<button aria-label="create something epic" type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- inverse Floating Button -->
<button aria-label="create something epic" type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- info Floating Button -->
<button aria-label="create something epic" type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- danger Floating Button -->
<button aria-label="create something epic" type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- warning Floating Button -->
<button aria-label="create something epic" type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

<!-- success Floating Button -->
<button aria-label="create something epic" type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path ="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" ="evenodd" />
    </svg>
</button>

Loading Button

Buttons with a spinner. You can use them to indicate an ongoing process and prevent users from clicking again.

Disabled

HTML

<!-- primary Loading Button -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
        <path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
        <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
    </svg>
</button>

<!-- secondary Loading Button -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
        <path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
        <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
    </svg>
</button>

<!-- alternate Loading Button -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
        <path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
        <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
    </svg>
</button>

<!-- inverse Loading Button -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
        <path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
        <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
    </svg>
</button>

<!-- info Loading Button -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
        <path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
        <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
    </svg>
</button>

<!-- danger Loading Button -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
        <path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
        <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
    </svg>
</button>

<!-- warning Loading Button -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
        <path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
        <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
    </svg>
</button>

<!-- success Loading Button -->
<button type="button" ="">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
        <path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
        <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
    </svg>
</button>

Keyboard Navigation

Key	Action
`Tab`	Button gets the focus
`Space`	Activates focused button

On this page

Theme Settings

Theme

Primary Color (Light Mode)

more color options

Border

Border Radius

Title Font Family

Body Font Family

🍪 Got Cookies!

We use cookies to ensure that we give you the best experience on our website. For more information, please read our Privacy Policy .