1. Components
  2. Buttons

Components

Tailwind CSS Buttons

Use different button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Types

The most commonly used button styles.

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.

Button examples New

Circlular like and dislike button styles.