Tailwind CSS Button - React

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.

Button Variants

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>
  );
}

Button Sizes

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>
  );
}

Button Colors

The Button component comes with 19 different colors that you can change it using the color prop.

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>
  );
}

Button with Icon

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

import { Button } from "@material-tailwind/react";
import {
  CloudArrowUpIcon,
  ArrowLongRightIcon,
  ArrowPathIcon,
  BookmarkIcon,
} from "@heroicons/react/24/outline";
 
export default function Day01() {
  return (
    <div className="flex items-center gap-4">
      <Button className="flex items-center gap-3">
        <BookmarkIcon strokeWidth={2} className="h-5 w-5" /> Add to Bookmark
      </Button>
      <Button variant="gradient" className="flex items-center gap-3">
        <CloudArrowUpIcon strokeWidth={2} className="h-5 w-5" /> Upload Files
      </Button>
      <Button variant="outlined" className="flex items-center gap-3">
        Refresh
        <ArrowPathIcon strokeWidth={2} className="h-5 w-5" />
      </Button>
      <Button variant="text" className="flex items-center gap-2">
        Read More <ArrowLongRightIcon strokeWidth={2} className="h-5 w-5" />
      </Button>
    </div>
  );
}

Block Level Button

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.

Button Ripple Effect

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>
  );
}

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.

import { Button } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button size="lg" color="white" className="flex items-center gap-3">
        <img src="/icons/metamask.svg" alt="metamask" className="h-6 w-6" />
        Connect Wallet
      </Button>
      <Button
        size="lg"
        variant="outlined"
        color="blue-gray"
        className="flex items-center gap-3"
      >
        <img src="/icons/google.svg" alt="metamask" className="h-6 w-6" />
        Continue with Google
      </Button>
      <Button
        size="lg"
        variant="gradient"
        color="light-blue"
        className="group relative flex items-center gap-3 overflow-hidden pr-[72px]"
      >
        Sign in with Twitter
        <span className="absolute right-0 grid h-full w-12 place-items-center bg-light-blue-600 transition-colors group-hover:bg-light-blue-700">
          <img src="/icons/twitter.svg" alt="metamask" className="h-6 w-6" />
        </span>
      </Button>
    </div>
  );
}

Props

Learn more about props definition and types of button component.

Theme

Learn how to customize the theme and styles for button component.

breadcrumbs

card

Edit this page on Github