# `m-button`

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'` `'accent'` `'danger'` `'inverse'` | `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 |
|------|-------------|
| `icon` | Use this slot to insert an icon for the Button. |
| `icon` | Use this slot to insert an icon for the Button. |
| `default` | The content displayed in the button. |
| `icon` | Use this slot to insert an icon for the Button. |

## Dependencies

### Depends on

- [m-loader](../loader/README.md)

### Graph

```mermaid
graph TD;
  m-button --> m-loader
style m-button fill:#008240,stroke:#333,stroke-width:4px
```

### Used By

- [m-action-listbox](../actionlistbox/README.md)
- [m-file-uploader-item](../fileuploaderitem/README.md)
- [m-navigation-indicator](../navigationindicator/README.md)
- [m-option-listbox](../optionlistbox/README.md)
- [m-pagination](../pagination/README.md)
- [m-stepper-bottom-bar](../stepperbottombar/README.md)
- [m-tile-expandable](../tileexpandable/README.md)

### Graph

```mermaid
graph TD;
  m-action-listbox --> m-button
  m-file-uploader-item --> m-button
  m-navigation-indicator --> m-button
  m-option-listbox --> m-button
  m-pagination --> m-button
  m-stepper-bottom-bar --> m-button
  m-tile-expandable --> m-button
style m-button fill:#008240,stroke:#333,stroke-width:4px
```
