Tailwind CSS Buttons

Types

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

Sizes

Compare button padding and height from compact to large sizes.

Outline color variants

Use outlined buttons for lighter emphasis with clear boundaries.

Ghost color variants

Use ghost buttons for subtle actions on already structured surfaces.

Soft color variants

Use soft fills when you want color without the weight of a solid button.

White color variants

Use white-filled buttons with subtle borders for dark or more colorful backgrounds.

Link color variants

Use link-style buttons for the lightest inline actions.

Full-width button

Use w-full or grid to make a button stretch to its parent width.

Buttons with icons

Pair icons with button text to reinforce the action or direction visually.

Icon-only buttons

Use equal width and height to create square icon-only buttons.

Icon-only button sizes

Scale icon-only buttons across sizes while keeping the same square pattern.

Loading

Use a spinner inside the button to show that an action is currently processing.

Disabled

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

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

Active

Use the active: modifier to style a button in its pressed state.

Reaction buttons

Build compact reaction button groups for actions like upvote and downvote.