SuiButton
The SuiButton 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 SuiButton 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
// Soft UI Dashboard React components
import SuiButton from "components/SuiButton";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'text''contained''outlined''gradient' | contained | Change the SuiButton background color type. |
| size | 'small''medium''large' | medium | Change the SuiButton size. |
| color | 'primary''secondary''info''success''warning''error''light''dark''white' | white | Change the SuiButton background color. |
| circular | bool | false | If true the SuiButton get a rounded or circular shape. |
| iconOnly | bool | false | If true the SuiButton will have same width andheight values, its useful when using only icon inside the SuiButton component. |
| children* | node | Use to pass node or content inside the SuiButton, its the only required prop. | |
| MUI Props | You can pass all of the MUI Button props for the SuiButton as well. |
Variants
// Soft UI Dashboard React components
import SuiButton from "components/SuiButton";
Sizes
// Soft UI Dashboard React components
import SuiButton from "components/SuiButton";
With Icon
// Soft UI Dashboard React components
import SuiButton from "components/SuiButton";
// @mui material components
import Icon from "@mui/material/Icon";
Block
// Soft UI Dashboard React components
import SuiButton from "components/SuiButton";