@mozaic-ds/vue/src/components/button/README.md

Mozaic-Vue is the Vue.js implementation of ADEO Design system

# MButton

Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `appearance` | Defines the visual style of the button. | `"standard"` `"danger"` `"inverse"` `"accent"` | `"standard"` |
| `size` | Determines the size of the button. | `"s"` `"m"` `"l"` | `"m"` |
| `disabled` | If `true`, disables the button, making it non-interactive. | `boolean` | - |
| `ghost` | If `true`, applies a "ghost" style to the button, typically a transparent background with a border. | `boolean` | - |
| `outlined` | If `true`, the button gets an outlined style, usually with just the border and no solid background. | `boolean` | - |
| `iconPosition` | Controls the positioning of an icon in the button. | `"left"` `"right"` `"only"` | - |
| `type` | Specifies the button's HTML `type` attribute. | `"button"` `"reset"` `"submit"` | `"button"` |
| `isLoading` | If `true`, a loading state is displayed. | `boolean` | - |

## Slots

| Name | Description |
| --- | --- |
| `default` | The content displayed in the button. |
| `icon` | Use this slot to insert an icon for the Button. |

## Dependencies

### Depends on

- [MLoader](../loader)

### Graph

```mermaid
graph TD;
  MButton --> MLoader
style MButton fill:#008240,stroke:#333,stroke-width:4px
```

### Used By

- [MFileUploaderItem](../fileuploaderitem)
- [MNavigationIndicator](../navigationindicator)
- [MOptionListbox](../optionListbox)
- [MPagination](../pagination)
- [MPasswordInput](../passwordinput)
- [MStepperBottomBar](../stepperbottombar)
- [MTileExpandable](../tileexpandable)

### Graph

```mermaid
graph TD;
  MFileUploaderItem --> MButton
  MNavigationIndicator --> MButton
  MOptionListbox --> MButton
  MPagination --> MButton
  MPasswordInput --> MButton
  MStepperBottomBar --> MButton
  MTileExpandable --> MButton
style MButton fill:#008240,stroke:#333,stroke-width:4px
```