## Anchor  
Use the Anchor component to add links with Mantine's theme styles.  
Category: Navigation  

### Simple Example

dmc.Anchor is a wrapper around dmc.Text component and works similar to dcc.Link, so you can use it with multipage apps.
It takes the same props as dmc.Text.

```python
import dash_mantine_components as dmc

component = dmc.Anchor(
    "Dash Mantine Components Announcement",
    href="https://community.plotly.com/t/dash-mantine-components/58414",
)
```
### Underline


```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.Anchor(
        "Underline always",
        href="https://www.dash-mantine-components.com/",
        target="_blank",
        underline = "always",
    ),
    dmc.Anchor(
        "Underline on hover",
        href="https://www.dash-mantine-components.com/",
        target="_blank",
        underline = "hover",
    ),
    dmc.Anchor(
        "Underline never",
        href="https://www.dash-mantine-components.com/",
        target="_blank",
        underline = "never",
    ),
    dmc.Anchor(
        "Underline not hover",
        href="https://www.dash-mantine-components.com/",
        target="_blank",
        underline = "not-hover",
    ),

])
```
You can also configure underline prop for all Anchor components with default props:

```python
dmc.MantineProvider(    
    theme={
        "components": {
            "Anchor": {
                "defaultProps": {
                    "underline": "always",
                },
            },
        },
    }
)

```

### Text props

Text props
`Anchor` components supports all `Text` component props. For example, you can use gradient variant:


```python
import dash_mantine_components as dmc

component = dmc.Anchor(
    "A link with pink to yellow gradient",
    href="#text-props",
    variant="gradient",
    gradient={"from": "pink", "to": "yellow"},
    fw=500,
    fz="lg",
)
```
### 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.


#### Anchor selectors

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root     | .mantine-Anchor-root | Root element |

#### Anchor CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root     | --text-fz | Controls font-size property |
| root     | --text-lh | Controls line-height property |
| root     | --text-gradient | Text fill gradient |
| root     | --text-line-clamp | Number of lines that should be visible |

#### Anchor data attributes

| Selector | Attribute | Condition | Value |
|----------|-----------|-----------|-------|
| root     | data-truncate | `truncate` prop is set | Value of `truncate` prop |
| root     | data-line-clamp | `lineClamp` prop is a number | – |
| root     | data-inline | `inline` prop is set | – |
| root     | data-inherit | `inherit` prop is set | – |
| root     | data-underline | – | Value of `underline` prop |


### Keyword Arguments
#### Anchor

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

- anchorProps (dict; optional):
    Props passed down to the `Anchor` component.

    `anchorProps` is a dict with keys:

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

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

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

- gradient (dict; optional):
    Gradient configuration, ignored when `variant` is not `gradient`,
    `theme.defaultGradient` by default.

    `gradient` is a dict with keys:

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

- href (string; required):
    href.

- inherit (boolean; optional):
    Determines whether font properties should be inherited from the
    parent, `False` by default.

- inline (boolean; optional):
    Sets `line-height` to 1 for centering, `False` by default.

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

- lineClamp (number; optional):
    Number of lines after which Text will be truncated.

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

- refresh (boolean; optional):
    Whether to refresh the page.

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

- target (a value equal to: '_blank', '_self'; optional):
    Target.

- truncate (boolean; optional):
    Side on which Text must be truncated, if `True`, text is truncated
    from the start.

- underline (a value equal to: 'always', 'hover', 'never'; optional):
    Determines in which cases link should have `text-decoration:
    underline` styles, `hover` by default.

- variant (string; optional):
    variant.

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