@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
73 lines (57 loc) • 2.21 kB
Markdown
# MIconButton
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 icon button. | `"standard"` `"danger"` `"inverse"` `"accent"` | `"standard"` |
| `size` | Determines the size of the icon button. | `"s"` `"m"` `"l"` | `"m"` |
| `disabled` | If `true`, disables the icon button, making it non-interactive. | `boolean` | - |
| `ghost` | If `true`, applies a "ghost" style to the icon button. | `boolean` | - |
| `outlined` | If `true`, the icon button gets an outlined style. | `boolean` | - |
| `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. |
## Dependencies
### Depends on
- [MLoader](../loader)
### Graph
```mermaid
graph TD;
MIconButton --> MLoader
style MIconButton fill:#008240,stroke:#333,stroke-width:4px
```
### Used By
- [MActionListbox](../actionlistbox)
- [MCarousel](../carousel)
- [MDrawer](../drawer)
- [MModal](../modal)
- [MNavigationIndicator](../navigationindicator)
- [MPageHeader](../pageheader)
- [MPagination](../pagination)
- [MPopover](../popover)
- [MSidebar](../sidebar)
- [MSidebarFooter](../sidebarfooter)
- [MStatusNotification](../statusnotification)
- [MTileExpandable](../tileexpandable)
- [MToaster](../toaster)
### Graph
```mermaid
graph TD;
MActionListbox --> MIconButton
MCarousel --> MIconButton
MDrawer --> MIconButton
MModal --> MIconButton
MNavigationIndicator --> MIconButton
MPageHeader --> MIconButton
MPagination --> MIconButton
MPopover --> MIconButton
MSidebar --> MIconButton
MSidebarFooter --> MIconButton
MStatusNotification --> MIconButton
MTileExpandable --> MIconButton
MToaster --> MIconButton
style MIconButton fill:#008240,stroke:#333,stroke-width:4px
```