# Avatar

An avatar is a small image or icon representing a user or organization.

## Example

```python
from deephaven import ui


my_avatar_basic = ui.avatar(
    src="https://github.com/deephaven.png", alt="default avatar"
)
```

## Disabled State

The `is_disabled` prop disables avatars to prevent user interaction and gives them a silenced style.

```python
from deephaven import ui


my_avatar_is_disabled_example = ui.avatar(
    src="https://github.com/deephaven.png", alt="default avatar", is_disabled=True
)
```

## Size

The `size` of an avatar can be set to one of the preset sizes, or a custom pixel value.

```python
from deephaven import ui


@ui.component
def ui_avatar_sizing_examples():
    return [
        ui.avatar(
            src="https://github.com/deephaven.png",
            alt="avatar-size-50",
            size="avatar-size-50",
        ),
        ui.avatar(
            src="https://github.com/deephaven.png",
            alt="avatar-size-75",
            size="avatar-size-75",
        ),
        ui.avatar(
            src="https://github.com/deephaven.png",
            alt="davatar-size-100",
            size="avatar-size-100",
        ),
        ui.avatar(
            src="https://github.com/deephaven.png",
            alt="avatar-size-200",
            size="avatar-size-200",
        ),
        ui.avatar(
            src="https://github.com/deephaven.png",
            alt="avatar-size-300",
            size="avatar-size-300",
        ),
        ui.avatar(
            src="https://github.com/deephaven.png",
            alt="avatar-size-400",
            size="avatar-size-400",
        ),
        ui.avatar(
            src="https://github.com/deephaven.png",
            alt="avatar-size-500",
            size="avatar-size-500",
        ),
        ui.avatar(
            src="https://github.com/deephaven.png",
            alt="avatar-size-600",
            size="avatar-size-600",
        ),
        ui.avatar(
            src="https://github.com/deephaven.png",
            alt="avatar-size-700",
            size="avatar-size-700",
        ),
        ui.avatar(
            src="https://github.com/deephaven.png", alt="custom pixel size", size=80
        ),
    ]


my_avatar_sizing_examples = ui_avatar_sizing_examples()
```

## API Reference

An avatar is a thumbnail representation of an entity, such as a user or an organization.

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

<ParamTable param={{"module_name": "deephaven.ui.", "name": "avatar", "parameters": [{"name": "src", "type": "str", "description": "The image URL for the avatar."}, {"name": "is_disabled", "type": "bool | None", "description": "Whether the avatar is disabled or not.", "default": "None"}, {"name": "size", "type": "Literal['avatar-size-50', 'avatar-size-75', 'avatar-size-100', 'avatar-size-200', 'avatar-size-300', 'avatar-size-400', 'avatar-size-500', 'avatar-size-600', 'avatar-size-700'] | str | float | None", "description": "The size of the avatar. It affects both height and width.", "default": "'avatar-size-100'"}, {"name": "alt", "type": "str | None", "description": "Description of the avatar.", "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": "id", "type": "str | None", "description": "The unique identifier of 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"}]}} />