React Buttons

Use Material Tailwind buttons for actions in forms, dialogues, and more with support for multiple sizes, states, and more.


Button

import React from "react";
import Button from "@material-tailwind/react/Button";

export default function Button() {
    return (
        <Button
            color="lightBlue"
            buttonType="link"
            size="regular"
            rounded={false}
            block={false}
            iconOnly={false}
            ripple="dark"
        >
            Button
        </Button>
    )
}
 

Rounded Button

import React from "react";
import Button from "@material-tailwind/react/Button";

export default function Button() {
    return (
        <Button
            color="lightBlue"
            buttonType="link"
            size="regular"
            rounded={true}
            block={false}
            iconOnly={false}
            ripple="dark"
        >
            Rounded Button
        </Button>
    )
}
 

Small Button

import React from "react";
import Button from "@material-tailwind/react/Button";

export default function Button() {
    return (
        <Button
            color="lightBlue"
            buttonType="link"
            size="sm"
            rounded={false}
            block={false}
            iconOnly={false}
            ripple="dark"
        >
            Small Button
        </Button>
    )
}
 

Regular Button

import React from "react";
import Button from "@material-tailwind/react/Button";

export default function Button() {
    return (
        <Button
            color="lightBlue"
            buttonType="link"
            size="regular"
            rounded={false}
            block={false}
            iconOnly={false}
            ripple="dark"
        >
            Regular Button
        </Button>
    )
}
 

Large Button

import React from "react";
import Button from "@material-tailwind/react/Button";

export default function Button() {
    return (
        <Button
            color="lightBlue"
            buttonType="link"
            size="lg"
            rounded={false}
            block={false}
            iconOnly={false}
            ripple="dark"
        >
            Large Button
        </Button>
    )
}
 

Block Level Button

import React from "react";
import Button from "@material-tailwind/react/Button";

export default function Button() {
    return (
        <Button
            color="lightBlue"
            buttonType="link"
            size="lg"
            rounded={false}
            block={true}
            iconOnly={false}
            ripple="dark"
        >
            Block Level Button
        </Button>
    )
}
 

With Icon Before

import React from "react";
import Button from "@material-tailwind/react/Button";
import Icon from "@material-tailwind/react/Icon";

export default function Button() {
    return (
        <Button
            color="lightBlue"
            buttonType="link"
            size="regular"
            rounded={false}
            block={false}
            iconOnly={false}
            ripple="dark"
        >
            <Icon name="favorite" /> With Icon Before
        </Button>
    )
}
 

With Icon After

import React from "react";
import Button from "@material-tailwind/react/Button";
import Icon from "@material-tailwind/react/Icon";

export default function Button() {
    return (
        <Button
            color="lightBlue"
            buttonType="link"
            size="regular"
            rounded={false}
            block={false}
            iconOnly={false}
            ripple="dark"
        >
            With Icon After <Icon name="favorite" />
        </Button>
    )
}
 

With Icon Only

import React from "react";
import Button from "@material-tailwind/react/Button";
import Icon from "@material-tailwind/react/Icon";

export default function Button() {
    return (
        <Button
            color="lightBlue"
            buttonType="link"
            size="regular"
            rounded={true}
            block={false}
            iconOnly={true}
            ripple="dark"
        >
            <Icon name="favorite" size="sm" />
        </Button>
    )
}