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