## Indicator  
Use Indicator to display element at the corner of another element  
Category: Data Display  

### Introduction

Use Indicator to display element at the corner of another element.

### Inline

When the target element has a fixed width, set `inline` prop to add `display: inline-block;` styles to Indicator container.
Alternatively, you can set width and height with `style` prop if you still want the root element to keep `display: block`.

```python
import dash_mantine_components as dmc

component = dmc.Indicator(
    dmc.Avatar(
        size="lg",
        radius="sm",
        src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
    ),
    inline=True,
    size=16,
    label="New",
)
```
### Offset

Set `offset` to change indicator position. It is useful when Indicator component is used with children that have border-radius:

```python
import dash_mantine_components as dmc

component = dmc.Indicator(
    dmc.Avatar(
        size="lg",
        radius="xl",
        src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-3.png",
    ),
    inline=True,
    offset=7,
    position="bottom-end",
    color="red",
    withBorder=True,
    size=16,
)
```
### Processing Animation

```python
import dash_mantine_components as dmc

component = dmc.Indicator(
    dmc.Avatar(
        size="lg",
        radius="sm",
        src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png",
    ),
    inline=True,
    color="red",
    size=12,
    processing=True,
)
```
### 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-Indicator-root      | Root element      |
| indicator | .mantine-Indicator-indicator | Indicator element |


### Keyword Arguments
#### Indicator

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- autoContrast (boolean; optional):
    Determines whether text color should depend on `background-color`.
    If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- 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,
    `theme.primaryColor` by default.

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

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

- disabled (boolean; optional):
    When Indicator is disabled it renders children only.

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

- inline (boolean; optional):
    Determines whether the indicator container should be an inline
    element, `False` by default.

- label (a list of or a singular dash component, string or number; optional):
    Label rendered inside the indicator, for example, notification
    count.

- 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.

- offset (number; optional):
    Indicator offset relative to the target element, usually used for
    elements with border-radius, equals to `size` by default.

- position (a value equal to: 'top-center', 'top-end', 'top-start', 'bottom-center', 'bottom-end', 'bottom-start', 'middle-center', 'middle-end', 'middle-start'; optional):
    Indicator position relative to the target element, `'top-end'` by
    default.

- processing (boolean; optional):
    Determines whether the indicator should have processing animation,
    `False` by default.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `100` by default.

- size (string | number; optional):
    Indicator width and height, `10` 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`.

- withBorder (boolean; optional):
    Determines whether the indicator should have a border (color of
    the border is the same as the body element), `False` by default.

- zIndex (string | number; optional):
    Indicator z-index, `200` by default.