Tailwind CSS Buttons

Types

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

Sizes

Buttons stacked small to large sizes.

Color variants

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

Predefined white color button styles.

Link color variants

Predefined link color button styles.

Shape

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

Style button on active using the active modifier:

Button examples

Circlular like and dislike button styles.