## Badge  
Use Badges to show indicators, numerical or otherwise.  
Category: Data Display  

### Introduction

### Variants

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Badge("Default light badge"),
        dmc.Badge("Dot badge", variant="dot"),
        dmc.Badge("Outline badge", variant="outline"),
        dmc.Badge("Filled badge", variant="filled"),
    ]
)
```
### Colors

```python
import dash_mantine_components as dmc

dmc.Badge("Orange", color="orange")
```

### Gradient variant

```python
import dash_mantine_components as dmc

component = dmc.Group(
    children=[
        dmc.Badge(
            "Indigo cyan",
            variant="gradient",
            gradient={"from": "indigo", "to": "cyan"},
        ),
        dmc.Badge(
            "Lime green",
            variant="gradient",
            gradient={"from": "teal", "to": "lime", "deg": 105},
        ),
        dmc.Badge(
            "Teal blue",
            variant="gradient",
            gradient={"from": "teal", "to": "blue", "deg": 60},
        ),
        dmc.Badge(
            "Orange red",
            variant="gradient",
            gradient={"from": "orange", "to": "red"},
        ),
        dmc.Badge(
            "Grape pink",
            variant="gradient",
            gradient={"from": "grape", "to": "pink", "deg": 35},
        ),
    ]
)
```
### Size

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Badge("Sale", size="xs"),
        dmc.Badge("Sale", size="sm"),
        dmc.Badge("Sale", size="md"),
        dmc.Badge("Sale", size="lg"),
        dmc.Badge("Sale", size="xl"),
    ]
)
```
### Radius

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Badge("Sale", radius="xs"),
        dmc.Badge("Sale", radius="sm"),
        dmc.Badge("Sale", radius="md"),
        dmc.Badge("Sale", radius="lg"),
        dmc.Badge("Sale", radius="xl"),
    ]
)
```
### Rounded

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Badge(1, size="xs", circle=True),
        dmc.Badge(7, size="sm", circle=True),
        dmc.Badge(9, size="md", circle=True),
        dmc.Badge(3, size="lg", circle=True),
        dmc.Badge(8, size="xl", circle=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-Badge-root         | Root element            |
| label        | .mantine-Badge-label        | Badge children          |
| section      | .mantine-Badge-section      | Left and right sections |


### Keyword Arguments
#### Badge

- children (a list of or a singular dash component, string or number; optional):
    Main badge 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 with filled variant 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`.

- circle (boolean; optional):
    If set, badge `min-width` becomes equal to its `height` and
    horizontal padding is removed.

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

- fullWidth (boolean; optional):
    Determines whether Badge should take 100% of its parent width,
    `False` by default.

- gradient (dict; optional):
    Gradient configuration used when `variant="gradient"`, default
    value is `theme.defaultGradient`.

    `gradient` is a dict with keys:

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

- leftSection (a list of or a singular dash component, string or number; optional):
    Content displayed on the left side of the badge label.

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

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

- rightSection (a list of or a singular dash component, string or number; optional):
    Content displayed on the right side of the badge label.

- size (optional):
    Controls `font-size`, `height` and horizontal `padding`, `'md'` 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`.