Button | Vision UI Dashboard React @ Creative Tim & Simmmple

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

Name	Type	Default	Description
variant	'text''contained''outlined''gradient'	contained	Change the `VuiButton` background color type.
size	'small''medium''large'	medium	Change the `VuiButton` size.
color	'primary''secondary''info''success''warning''error''light''dark''white'	white	Change the `VuiButton` background color.
circular	bool	false	If `true` the `VuiButton` get a rounded or circular shape.
iconOnly	bool	false	If `true` the `VuiButton` will have same `width` and`height` values, its useful when using only icon inside the `VuiButton` component.
children*	node		Use to pass node or content inside the `VuiButton`, its the only required prop.
MUI Props			You 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";