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

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

# MDivider

A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `orientation` | Determines the orientation of the divider. | `"horizontal"` `"vertical"` | `"horizontal"` |
| `appearance` | Determines the appearance of the divider. | `"inverse"` `"primary"` `"secondary"` `"tertiary"` | `"primary"` |
| `size` | Determines the size of the divider. | `"s"` `"m"` `"l"` | `"s"` |

## Slots

| Name | Description |
| --- | --- |
| `default` | Use this slot to insert the content who need a vertical divider |

## Dependencies

### Used By

- [MActionBottomBar](../actionbottombar)
- [MActionListbox](../actionlistbox)
- [MFileUploaderItem](../fileuploaderitem)
- [MSidebarFooter](../sidebarfooter)
- [_MSidebarFooterMenu](../sidebarfooter)
- [MSidebarShortcuts](../sidebarshortcuts)
- [MStepperBottomBar](../stepperbottombar)
- [MTabs](../tabs)

### Graph

```mermaid
graph TD;
  MActionBottomBar --> MDivider
  MActionListbox --> MDivider
  MFileUploaderItem --> MDivider
  MSidebarFooter --> MDivider
  _MSidebarFooterMenu --> MDivider
  MSidebarShortcuts --> MDivider
  MStepperBottomBar --> MDivider
  MTabs --> MDivider
style MDivider fill:#008240,stroke:#333,stroke-width:4px
```