button.mdx

title	description	navigation	github	prev	next
Tailwind CSS Button for React - Material Tailwind	Customise your web projects with our easy-to-use button component for Tailwind CSS and React using Material Design guidelines.	button button-variants button-sizes button-colors props types	button	breadcrumbs	card

Tailwind CSS Button - React

Use our buttons based on Tailwind CSS for actions in forms, dialogues, and more.

Buttons are an essential element of web design. Basically, buttons are styled links that grab the users’ 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.

Button

import { Button } from "@material-tailwind/react";

export default function Example() {
  return <Button>Button</Button>;
}

---

Button Variants

The button component comes with 4 different variants that you can change it using the variant prop.

filled gradient outlined text

import { Button } from "@material-tailwind/react";

export default function Variants() {
  return (
    <div className="flex gap-4 w-max">
      <Button variant="filled">filled</Button>
      <Button variant="gradient">gradient</Button>
      <Button variant="outlined">outlined</Button>
      <Button variant="text">text</Button>
    </div>
  );
}

---

Button Sizes

The button component comes with 3 different sizes that you can change it using the size prop.

small medium large

import { Button } from "@material-tailwind/react";

export default function Sizes() {
  return (
    <div className="flex items-end gap-4 w-max">
      <Button size="sm">small</Button>
      <Button size="md">medium</Button>
      <Button size="lg">large</Button>
    </div>
  );
}

---

Button Colors

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.

color blue color red color green color amber

import { Button } from "@material-tailwind/react";

export default function Colors() {
  return (
    <div className="flex gap-4 w-max">
      <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>
  );
}

---

Props

The following props are available for the button component. These are the custom props that come with we've added for the button component and you can use all the other native button props as well.

Attribute	Type	Description	Default
variant	Variant	Change button variant	filled
size	Size	Change button size	md
color	Color	Change button color	blue
fullWidth	boolean	Change button to a block level element	false
ripple	boolean	Add ripple effect for button	true
className	string	Add custom className for button	''
children	node	Add content for button	No default value its a required prop.

---

Types

type variant = "filled" | "outlined" | "gradient" | "text";

type size = "sm" | "md" | "lg";

type color =
  | "blue-grey"
  | "grey"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";