Button

Use Tailwind's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Basic Buttons

Default

Use the .rounded .rounded.bg-blue-700 classes.

Blue Gray Cyan Yellow Red Green White Black
Rounded

Use a class .rounded to create round button.

Blue Gray Cyan Yellow Red Green White Black

Buttons .rounded .rounded.bg-opacity-[0].bg-blue-700

Use the .rounded .rounded.border-blue-700 classes.

Blue Gray Cyan Yellow Red Green White Black

Button Sizes

Use the py-3 px-3 or py-1 px-1 classes.

Small Normal Large
Small Normal Large

Button States

Use the .opacity class.

Normal Disabled Progress

Icon Button

Use the SVG and .inline-flex label / classes.

Default Blue Gray Cyan Yellow Red Green White Black

Only Icon Button

Use the SVG label.

Sizes.

Button Group

Vertical Variation

2023 © Mazer

Crafted with by Saugi