## Divider  
Use Divider component as an alternative to html.Hr.  
Category: Miscellaneous  

### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    children=[
        dmc.Divider(variant="solid"),
        dmc.Divider(variant="dashed"),
        dmc.Divider(variant="dotted"),
    ],
)
```
### With Label

You can provide `label` and `labelPosition` to customize dmc.Divider.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Divider(label="Click on update button to refresh"),
        dmc.Divider(label="Divider with centered content", labelPosition="center"),
        dmc.Divider(label="Divider with content on the right", labelPosition="right"),
    ],
)
```
### Different Sizes

Set the `size` property to change the size of the divider.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    children=[
        dmc.Divider(size="xs"),
        dmc.Divider(size="sm"),
        dmc.Divider(size="md"),
        dmc.Divider(size="lg"),
        dmc.Divider(size="xl"),
        dmc.Divider(size=10),
    ],
)
```
### Vertical Divider

Divider can be used in vertical orientations by setting `orientation="vertical"` and providing it some height.

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Badge("Badge 1"),
        dmc.Divider(orientation="vertical", style={"height": 20}),
        dmc.Badge("Badge 2"),
        dmc.Divider(orientation="vertical", style={"height": 20}),
        dmc.Badge("Badge 3"),
    ]
)
```
### With Color

Set the Divider color from one of the colors of Mantine default theme using the `color` prop.

```python
import dash_mantine_components as dmc

component = dmc.Divider(color="red")
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name  | Static selector        | Description   |
|:------|:-----------------------|:--------------|
| root  | .mantine-Divider-root  | Root element  |
| label | .mantine-Divider-label | Label element |


### Keyword Arguments
#### Divider

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color value, by default
    value depends on color scheme.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- label (a list of or a singular dash component, string or number; optional):
    Divider label, visible only when `orientation` is `horizontal`.

- labelPosition (a value equal to: 'left', 'right', 'center'; optional):
    Controls label position, `'left'` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Controls orientation, `'horizontal'` by default.

- size (number; optional):
    Controls width/height (depends on orientation), `'xs'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.