1. Components
  2. Buttons

Components

Tailwind CSS Buttons

Browse and customize beautiful Tailwind CSS buttons in various styles, states, and sizes. Find active, disabled, pill, icon, and other free button examples.

Types

Explore the most commonly used button styles such as solid, outline, ghost, soft, link, and more.

Sizes

Buttons stacked small to large sizes.

Solid color variants

Predefined solid color button styles.

Outline color variants

Predefined outline color button styles.

Ghost color variants

Predefined ghost color button styles.

Soft color variants

Predefined soft color button styles.

White color variants New

Predefined white color button styles.

Predefined link color button styles.

Pilled Button

Use the .rounded-full utility class to make buttons circular.

Block Button

.w-full or .grid classes will make the button fit to its parent width.

Icon

A contained button with an icon.

With fixed width and height.

Also available in all button sizes.

Loading

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

Disabled

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

<a>s don't support the disabled attribute.

Active New

Style button on active using the active modifier:

Button examples New

Circlular like and dislike button styles.