# Button

## AnimateButton

This represents a Button with animation: <https://mui.com/material-ui/react-button/>

The properties are:

| Property                                   | Type       | Props Value                     |
| ------------------------------------------ | ---------- | ------------------------------- |
| type                                       | string     | scale (default), slide, rotate  |
| direction                                  | string     | right (default), left, up, down |
| offset                                     | number     | 10                              |
| scale                                      | ScaleProps | { hover: 1.05, tap: 0.954 }     |
| children<mark style="color:red;">\*</mark> | ReactNode  |                                 |

## IconButton

This component extends the original component provided by MUI: <https://mui.com/material-ui/react-button/#icon-button>

The extended properties are:

| Property                                   | Type                                    | Props Value                                                |
| ------------------------------------------ | --------------------------------------- | ---------------------------------------------------------- |
| shape                                      | IconButtonShapeProps                    | square (default), rounded                                  |
| variant                                    | ButtonVariantProps                      | text (default), contained, light, outlined, dashed, shadow |
| tooltip                                    | boolean \| ReactFragment \| ReactPortal | false                                                      |
| children<mark style="color:red;">\*</mark> | ReactNode                               |                                                            |

## LoadingButton

This component extends the original component provided by MUI: <https://mui.com/material-ui/react-button/>

The extended properties are:&#x20;

| Property                                   | Type                  | Props Value                                                                   |
| ------------------------------------------ | --------------------- | ----------------------------------------------------------------------------- |
| shape                                      | IconButtonShapeProps  | square (default), rounded                                                     |
| variant                                    | ButtonVariantProps    | text (default), contained, light, outlined, dashed, shadow                    |
| color                                      | ButtonProps\['color'] | primary (default), secondary, info, success, warning, error, inherit, default |
| children<mark style="color:red;">\*</mark> | ReactNode             |                                                                               |

Live Preview: <https://mantisdashboard.com/components-overview/buttons>

{% hint style="info" %}
Asterisk (<mark style="color:red;">\*</mark>) indicates required props.
{% endhint %}