VuiButton

The VuiButton component provides different styles for creating a button. It uses MUI Button in base and you can use all of the props from MUI Buttonfor the VuiButton component.


The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Demo

// Vision UI Dashboard React components import VuiButton from "components/VuiButton";

Props Information

NameTypeDefaultDescription
variant'text''contained''outlined''gradient'containedChange the VuiButton background color type.
size'small''medium''large'mediumChange the VuiButton size.
color'primary''secondary''info''success''warning''error''light''dark''white'whiteChange the VuiButton background color.
circularboolfalseIf true the VuiButton get a rounded or circular shape.
iconOnlyboolfalseIf true the VuiButton will have same width andheight values, its useful when using only icon inside the VuiButton component.
children*nodeUse to pass node or content inside the VuiButton, its the only required prop.
MUI PropsYou can pass all of the MUI Button props for the VuiButton as well.

Variants

// Vision UI Dashboard React components import VuiButton from "components/VuiButton";

Sizes

// Vision UI Dashboard React components import VuiButton from "components/VuiButton";

With Icon

// Vision UI Dashboard React components import VuiButton from "components/VuiButton"; // @mui material components import Icon from "@mui/material/Icon";

Block

// Vision UI Dashboard React components import VuiButton from "components/VuiButton";