Tailwind CSS Button

Use our buttons based on Tailwind CSS for actions in forms, dialogues, and more with support for multiple sizes, states, and more.

Buttons are an essential element of web design. Basically, buttons are styled links that grab the user's attention. They help users navigate our websites or apps and drive them to a particular action like submitting a contact form, or placing an order as easily as possible.

See below our button components examples.

Button Variants

See our button examples below. They come in different styles and color.

Button Sizes

Use this example to create buttons in different sizes.

Button Colors

Use this example to create a simple button element for your Tailwind CSS project.

Button with Icon

You can use any type of icons inside the button, in the below example we've used the @heroicons.

Block Level Button

A button could be a block-level component as well that gets all the available space in a row. You can render a button as a block-level element using the w-full class.

Button Ripple Effect

You can turn on/off the ripple effect for the button component by changing data-ripple-light or data-ripple-dark data attributes to true/false.

Custom Auth Buttons

You can use tailwind css classes with Button to create beautiful buttons for different purposes, below you can use some button examples used for authentication with social media and web 3.0.

Required Scrips

The button component needs a required script file for ripple effect to work, you just need to add the below script file to the bottom of your html file.

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html@latest/scripts/ripple.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>