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.
import { Button } from "@material-tailwind/react";
export default function Example() {
return <Button>Button</Button>;
}The Button component comes with 4 different variants that you can change it using the variant prop.
import { Button } from "@material-tailwind/react";
export default function Variants() {
return (
<div className="flex w-max gap-4">
<Button variant="filled">filled</Button>
<Button variant="gradient">gradient</Button>
<Button variant="outlined">outlined</Button>
<Button variant="text">text</Button>
</div>
);
}The Button component comes with 3 different sizes that you can change it using the size prop.
import { Button } from "@material-tailwind/react";
export default function Sizes() {
return (
<div className="flex w-max items-end gap-4">
<Button size="sm">small</Button>
<Button size="md">medium</Button>
<Button size="lg">large</Button>
</div>
);
}The Button component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.
import { Button } from "@material-tailwind/react";
export default function Colors() {
return (
<div className="flex w-max gap-4">
<Button color="blue">color blue</Button>
<Button color="red">color red</Button>
<Button color="green">color green</Button>
<Button color="amber">color amber</Button>
</div>
);
}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.
import { Button } from "@material-tailwind/react";
export default function Example() {
return <Button fullWidth>block level button</Button>;
}You can turn on/off the ripple effect for the Button component using the ripple prop.
import { Button } from "@material-tailwind/react";
export default function Example() {
return (
<div className="flex w-max gap-4">
<Button ripple={true}>Ripple Effect On</Button>
<Button ripple={false}>Ripple Effect Off</Button>
</div>
);
}