Use our Button
based on Tailwind CSS for actions in forms, dialogues, and more.
Button
is an essential element of web design. Basically,
Button
is 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 easy as possible.
See below our Button
example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors, so you can adapt it easily to your needs.
The Button
component comes with 4 different variants that you can change it using the variant
prop.
The Button
component comes with 3 different sizes that you can change it using the size
prop.
The Button
component comes with 19 different colors that you can change it using the color
prop.
You can use any type of icons inside the button, in the below example we've used the @heroicons.
A Button
could be a block level component as well that get's all the available space in a row. You can render a Button
as a block level element using the fullWidth
prop.
You can turn on/off the ripple effect for the Button
component using the ripple
prop.
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.