Use our Button component 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 component examples that you can use in your Tailwind CSS and React project. The examples comes in different styles and colors, so you can adapt it easily to your needs.
Here's how to implement a simple and responsive Button component. It can be used for the action of submitting a form, navigating between pages, or any other action that requires user interaction in your website.
import { Button } from "@material-tailwind/react";
export function ButtonDemo() {
return <Button>Button</Button>
}
import { Button } from "@material-tailwind/react";
We provides different button variants like ghost, outline, solid, and gradient so you can adapt it easily to your needs. You can simply use the variant prop to change the button variant.
In the example below, we've showcased the different button variants that you can use in your project.
import { Button } from "@material-tailwind/react";
export function ButtonVariants() {
return (
<div className="flex gap-4">
<Button variant="ghost">Ghost</Button>
<Button variant="outline">Outline</Button>
<Button variant="solid">Solid</Button>
<Button variant="gradient">Gradient</Button>
</div>
)
}
import { Button } from "@material-tailwind/react";
We provide different button sizes like sm, md, and lg so you can adapt it easily to your needs. You can simply use the size prop to change the button size.
In the example below, we've showcased the different button sizes that you can use in your project.
import { Button } from "@material-tailwind/react";
export function ButtonSizes() {
return (
<div className="flex gap-4 items-end">
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
</div>
)
}
import { Button } from "@material-tailwind/react";
We provide different button colors like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the button color.
In the example below, we've showcased the different button colors that you can use in your project.
import { Button } from "@material-tailwind/react";
export function ButtonColors() {
return (
<div className="flex gap-4">
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="info">Info</Button>
<Button color="success">Success</Button>
<Button color="warning">Warning</Button>
<Button color="error">Error</Button>
</div>
)
}
import { Button } from "@material-tailwind/react";
You can add an icon to the start or end of the button text to make it more visually appealing and informative. Use the example below to create buttons with icon.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
import { Button } from "@material-tailwind/react";
A button could be a block-level component as well that gets all the available space in a row. You can use the isFullWidth prop to make the Button component a block-level element.
In the example below, we've showcased the block-level button in 4 different variants that you can use in your project.
import { Button } from "@material-tailwind/react";
export function BlockLevelButton() {
return (
<div className="flex w-full flex-col gap-4">
<Button isFullWidth variant="ghost">
Ghost Block Level Button
</Button>
<Button isFullWidth variant="outline">
Outline Block Level Button
</Button>
<Button isFullWidth variant="solid">
Solid Block Level Button
</Button>
<Button isFullWidth variant="gradient">
Gradient Block Level Button
</Button>
</div>
);
}
import { Button } from "@material-tailwind/react";
You can use the Button component as a link by using the as prop and passing the a tag to it. This way you can use the Button component as a link to navigate to another page or website.
In the example below, we've showcased the button as a link in 4 different variants that you can use in your project.
You can use the Button component with a loading state to show the user that the action is in progress. To do that, you can use the Button component with the Spinner component to show a loading spinner inside the button.
In the example below, we've showcased the button with a loading state in 4 different variants that you can use in your project.
import { Button, Spinner } from "@material-tailwind/react";
You can use the className prop to customize the Button component style and make your own custom button.
In the example below, we've showcased how to create custom authentication buttons that you can use in your project.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
import { Button } from "@material-tailwind/react";
import { BitcoinCircle, GoogleCircle, Facebook } from "iconoir-react";
