1. Components
  2. Buttons

Components

Tailwind CSS Buttons - Preline UI

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.

Color variants

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.

Shape

Pilled Button

Use the .rounded-full utility class to make avatars 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 and .cursor-not-allowed class to any <button> element.

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