Components

Button

Browse and customize beautiful Tailwind CSS buttons in various styles and states, from active to disabled, allowing users to take actions or make choices.

Variants

Solid buttons

The standard format for button is component class `btn`, accompanied by modifier class `btn-{semantic-color}`.

Soft buttons

Add modifier class `btn-soft` for soft colored buttons.

Outline buttons

Add modifier class `btn-outline` for outline colored buttons.

Text buttons

Add modifier class `btn-text` for text colored buttons.

Gradient buttons

Add modifier class `btn-gradient` for gradient colored buttons.

Wave effect button

Add modifier class `waves` for wave effect in buttons.

Shapes

Pilled buttons

Use the `rounded-full` utility class to make buttons circular. The default shape of the button but can be altered by using TailwindCSS <a href="https://tailwindcss.com/docs/border-radius" target="_blank" class="link link-primary">Border Radius</a> utility classes.

Rounded buttons

This is the default shape of button.

States

States variants

Use the `btn-active` class to force the button to show the active state and the `btn-disabled` class to force the button to show the disabled state.

Size

Size variants

Add responsive class `btn-{size}` where `{size} = xs|sm|md|lg|xl` for button of different sizes.

Wide button

To create a wide button, add the `btn-wide` class which provides additional horizontal padding.

Block button

To create a wide button, add the `btn-block` class which occupies the full width of the parent container.

Responsive button

This button will have different sizes on different browser viewpoints.

Icon buttons

Icon at start/end

Use any icons at start/end the button.

Icon only

Use `btn-square` or `btn-circle` to create circle/square button with a 1:1 ratio.

Input tags

Buttons with input tags

You can use `btn` class on `<button>`, `<input>`, `<a>`, etc...

Link

Illustrations

Social buttons

Use the following sample code to build custom Social, Payment, and other types of buttons. This example also demonstrates how to create a custom button using two variables: `--btn-color` and `--btn-fg`.

Loading buttons

Use loading component to add a loader to the button.

Glass button

Use class `glass` to create a button with glass effect.

Dashed buttons

You can achieve this style by combining the `border-dashed` utility class with the `btn-outline` modifier class.

Button group

Group a series of buttons together on a single line or stack them in a vertical/horizontal column

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`btn`	component	Base class for the button component.
`btn-soft`	style	Soft colored button.
`btn-outline`	style	Transparent button with colored border.
`btn-gradient`	style	Gradient button
`btn-primary`	color	Button with 'primary' color.
`btn-secondary`	color	Button with 'secondary' color.
`btn-accent`	color	Button with 'accent' color.
`btn-info`	color	Button with 'info' color.
`btn-success`	color	Button with 'success' color.
`btn-warning`	color	Button with 'warning' color.
`btn-error`	color	Button with 'error' color.
`btn-active`	state	Force button to show active state.
`btn-disabled`	state	Force button to show disabled state.
`btn-xs`	size	Button with extra small size.
`btn-sm`	size	Button with small size.
`btn-md`	size	Button with medium(Default) size.
`btn-lg`	size	Button with large size.
`btn-xl`	size	Button with extra large size.
`glass`	modifier	Button with a glass effect.
`btn-wide`	modifier	Wide button (max-w-64).
`btn-block`	modifier	Full width button.
`btn-circle`	modifier	Circle button with a 1:1 ratio.
`btn-square`	modifier	Square button with a 1:1 ratio.