# Link

Links allow users to navigate to a specified location.

## Example

```python
from deephaven import ui

my_link_basic = ui.link("Learn more about Deephaven", href="https://deephaven.io/")
```

## Content

The link component accepts other components, such as `text` and `icon`, as children.

```python
from deephaven import ui


@ui.component
def ui_link_content_examples():
    return [
        ui.link(ui.icon("github"), href="https://github.com/deephaven"),
        ui.link("Deephaven Website", href="https://deephaven.io/"),
    ]


my_link_content_examples = ui_link_content_examples()
```

## Variants

Links can have different styles to indicate their purpose.

```python
from deephaven import ui


@ui.component
def ui_link_variant_examples():
    return [
        ui.link("Deephaven", href="https://deephaven.io/", variant="primary"),
        ui.link(
            "Contact the team",
            href="https://deephaven.io/contact",
            variant="secondary",
        ),
    ]


my_link_variant_examples = ui_link_variant_examples()
```

## Over background

Links can be placed over a background to add a visual prominence to the link.

```python
from deephaven import ui


my_link_over_background_example = ui.view(
    ui.link(
        "Learn more about pandas here!",
        href="https://en.wikipedia.org/wiki/Giant_panda",
        variant="overBackground",
    ),
    background_color="green-500",
    padding="size-300",
)
```

## Quiet State

The `is_quiet` prop makes the link  “quiet”. This can be useful when the link and its corresponding styling should not distract users from surrounding content.

```python
from deephaven import ui


my_link_is_quiet_example = ui.text(
    "You can ", ui.link("use quiet", is_quiet=True), " links inline."
)
```

## API Reference

A link is used for navigating between locations.

**Returns:** `Element` The rendered link element.

<ParamTable param={{"module_name": "deephaven.ui.", "name": "link", "parameters": [{"name": "*children", "type": "Any", "description": "The content to display in the link."}, {"name": "variant", "type": "Literal['primary', 'secondary', 'over_background'] | None", "description": "The background color of the link.", "default": "'primary'"}, {"name": "is_quiet", "type": "bool | None", "description": "Whether the link should be displayed with a quiet style.", "default": "None"}, {"name": "auto_focus", "type": "bool | None", "description": "Whether the element should receive focus on render.", "default": "None"}, {"name": "href", "type": "str | None", "description": "A URL to link to.", "default": "None"}, {"name": "target", "type": "Literal['_self', '_blank', '_parent', '_top'] | None", "description": "The target window for the link.", "default": "None"}, {"name": "rel", "type": "str | None", "description": "The relationship between the linked resource and the current page.", "default": "None"}, {"name": "ping", "type": "str | None", "description": "A space-separated list of URLs to ping when the link is followed.", "default": "None"}, {"name": "download", "type": "str | None", "description": "Causes the browser to download the linked URL.", "default": "None"}, {"name": "href_lang", "type": "str | None", "description": "Hints at the human language of the linked URL.", "default": "None"}, {"name": "referrer_policy", "type": "str | None", "description": "How much of the referrer to send when following the link.", "default": "None"}, {"name": "on_press", "type": "Callable[[PressEvent], None] | None", "description": "Function called when the link is pressed.", "default": "None"}, {"name": "on_press_start", "type": "Callable[[PressEvent], None] | None", "description": "Function called when the link is pressed and held.", "default": "None"}, {"name": "on_press_end", "type": "Callable[[PressEvent], None] | None", "description": "Function called when the link is released after being pressed.", "default": "None"}, {"name": "on_press_up", "type": "Callable[[PressEvent], None] | None", "description": "Function called when the link is released.", "default": "None"}, {"name": "on_press_change", "type": "Callable[[bool], None] | None", "description": "Function called when the pressed state changes.", "default": "None"}, {"name": "on_focus", "type": "Callable[[FocusEvent], None] | None", "description": "Function called when the link receives focus.", "default": "None"}, {"name": "on_blur", "type": "Callable[[FocusEvent], None] | None", "description": "Function called when the link loses focus.", "default": "None"}, {"name": "on_focus_change", "type": "Callable[[bool], None] | None", "description": "Function called when the focus state changes.", "default": "None"}, {"name": "on_key_down", "type": "Callable[[KeyboardEvent], None] | None", "description": "Function called when a key is pressed down.", "default": "None"}, {"name": "on_key_up", "type": "Callable[[KeyboardEvent], None] | None", "description": "Function called when a key is released.", "default": "None"}, {"name": "flex", "type": "str | float | bool | None", "description": "When used in a flex layout, specifies how the element will grow or shrink to fit the space available.", "default": "None"}, {"name": "flex_grow", "type": "float | None", "description": "When used in a flex layout, specifies how the element will grow to fit the space available.", "default": "None"}, {"name": "flex_shrink", "type": "float | None", "description": "When used in a flex layout, specifies how the element will shrink to fit the space available.", "default": "None"}, {"name": "flex_basis", "type": "str | float | None", "description": "When used in a flex layout, specifies the initial main size of the element.", "default": "None"}, {"name": "align_self", "type": "Literal['auto', 'normal', 'start', 'end', 'center', 'flex-start', 'flex-end', 'self-start', 'self-end', 'stretch'] | None", "description": "Overrides the alignItems property of a flex or grid container.", "default": "None"}, {"name": "justify_self", "type": "Literal['auto', 'normal', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'center', 'left', 'right', 'stretch'] | None", "description": "Species how the element is justified inside a flex or grid container.", "default": "None"}, {"name": "order", "type": "int | None", "description": "The layout order for the element within a flex or grid container.", "default": "None"}, {"name": "grid_area", "type": "str | None", "description": "When used in a grid layout specifies, specifies the named grid area that the element should be placed in within the grid.", "default": "None"}, {"name": "grid_row", "type": "str | None", "description": "When used in a grid layout, specifies the row the element should be placed in within the grid.", "default": "None"}, {"name": "grid_column", "type": "str | None", "description": "When used in a grid layout, specifies the column the element should be placed in within the grid.", "default": "None"}, {"name": "grid_row_start", "type": "str | None", "description": "When used in a grid layout, specifies the starting row to span within the grid.", "default": "None"}, {"name": "grid_row_end", "type": "str | None", "description": "When used in a grid layout, specifies the ending row to span within the grid.", "default": "None"}, {"name": "grid_column_start", "type": "str | None", "description": "When used in a grid layout, specifies the starting column to span within the grid.", "default": "None"}, {"name": "grid_column_end", "type": "str | None", "description": "When used in a grid layout, specifies the ending column to span within the grid.", "default": "None"}, {"name": "margin", "type": "str | float | None", "description": "The margin for all four sides of the element.", "default": "None"}, {"name": "margin_top", "type": "str | float | None", "description": "The margin for the top side of the element.", "default": "None"}, {"name": "margin_bottom", "type": "str | float | None", "description": "The margin for the bottom side of the element.", "default": "None"}, {"name": "margin_start", "type": "str | float | None", "description": "The margin for the logical start side of the element, depending on layout direction.", "default": "None"}, {"name": "margin_end", "type": "str | float | None", "description": "The margin for the logical end side of the element, depending on layout direction.", "default": "None"}, {"name": "margin_x", "type": "str | float | None", "description": "The margin for the left and right sides of the element.", "default": "None"}, {"name": "margin_y", "type": "str | float | None", "description": "The margin for the top and bottom sides of the element.", "default": "None"}, {"name": "width", "type": "str | float | None", "description": "The width of the element.", "default": "None"}, {"name": "height", "type": "str | float | None", "description": "The height of the element.", "default": "None"}, {"name": "min_width", "type": "str | float | None", "description": "The minimum width of the element.", "default": "None"}, {"name": "min_height", "type": "str | float | None", "description": "The minimum height of the element.", "default": "None"}, {"name": "max_width", "type": "str | float | None", "description": "The maximum width of the element.", "default": "None"}, {"name": "max_height", "type": "str | float | None", "description": "The maximum height of the element.", "default": "None"}, {"name": "position", "type": "Literal['static', 'relative', 'absolute', 'fixed', 'sticky'] | None", "description": "Specifies how the element is position.", "default": "None"}, {"name": "top", "type": "str | float | None", "description": "The top position of the element.", "default": "None"}, {"name": "bottom", "type": "str | float | None", "description": "The bottom position of the element.", "default": "None"}, {"name": "left", "type": "str | float | None", "description": "The left position of the element.", "default": "None"}, {"name": "right", "type": "str | float | None", "description": "The right position of the element.", "default": "None"}, {"name": "start", "type": "str | float | None", "description": "The logical start position of the element, depending on layout direction.", "default": "None"}, {"name": "end", "type": "str | float | None", "description": "The logical end position of the element, depending on layout direction.", "default": "None"}, {"name": "z_index", "type": "int | None", "description": "The stacking order for the element", "default": "None"}, {"name": "is_hidden", "type": "bool | None", "description": "Hides the element.", "default": "None"}, {"name": "aria_label", "type": "str | None", "description": "Defines a string value that labels the current element.", "default": "None"}, {"name": "aria_labelledby", "type": "str | None", "description": "Identifies the element (or elements) that labels the current element.", "default": "None"}, {"name": "aria_describedby", "type": "str | None", "description": "Identifies the element (or elements) that describes the object.", "default": "None"}, {"name": "aria_details", "type": "str | None", "description": "Identifies the element (or elements) that provide a detailed, extended description for the object.", "default": "None"}, {"name": "UNSAFE_class_name", "type": "str | None", "description": "Set the CSS className for the element. Only use as a last resort. Use style props instead.", "default": "None"}, {"name": "UNSAFE_style", "type": "Dict[str, Any] | None", "description": "Set the inline style for the element. Only use as a last resort. Use style props instead.", "default": "None"}]}} />