## Avatar Use Avatar to display user profile pictures. It supports images, icons, or letters. Use AvatarGroup to display stack Avatar components. Category: Data Display ### Simple Usage ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Group( children=[ dmc.Avatar( src="https://avatars.githubusercontent.com/u/91216500?v=4", radius="xl" ), # default placeholder dmc.Avatar(radius="xl"), # initials dmc.Avatar("MK", color="cyan", radius="xl"), # icon dmc.Avatar(DashIconify(icon="radix-icons:star"), color="blue", radius="xl"), ], ) ``` ### Initials To display initials instead of the default placeholder, set name prop to the name of the person, for example, `name='John Doe'`. If the name is set, you can use `color='initials'` to generate color based on the name: ```python import dash_mantine_components as dmc names = [ "John Doe", "Jane Mol", "Alex Lump", "Sarah Condor", "Mike Johnson", "Kate Kok", "Tom Smith", ] avatars = [dmc.Avatar(name=name, color="initials") for name in names] component = dmc.Group(avatars) ``` ### Allowed initials colors By default, all colors from the default theme are allowed for initials, you can restrict them by providing `allowedInitialsColors` prop with an array of colors. Note that the default colors array does not include custom colors defined in the theme, you need to provide them manually if needed. ```python import dash_mantine_components as dmc names = [ "John Doe", "Jane Mol", "Alex Lump", "Sarah Condor", "Mike Johnson", "Kate Kok", "Tom Smith", ] component = dmc.Group( [ dmc.Avatar(name=n, color="initials", allowedInitialsColors=["blue", "red"]) for n in names ] ) ``` ### Size, Radius and Variant Control Avatar's height and width with `size` prop and border-radius with `radius` prop. Both props have predefined values: xs, sm, md, lg, xl. Alternatively, a number can be used to set radius or size in px. You can also use `variant` to style the Avatar. ```python import dash_mantine_components as dmc dmc.Avatar(src="/assets/avatar.jpeg", size="sm"), dmc.Avatar(src="/assets/avatar.jpeg"), dmc.Avatar(src="/assets/avatar.jpeg", size=50, radius="xl"), dmc.Avatar(src="/assets/avatar.jpeg", size="xl", radius=20), dmc.Avatar(src="/assets/avatar.jpeg", size="xl", variant="outline"), ``` ### Avatar Group Use AvatarGroup to stack Avatar components. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.AvatarGroup( children=[ dmc.Avatar( src="https://avatars.githubusercontent.com/u/91216500?v=4", radius="xl" ), dmc.Avatar( src="https://avatars.githubusercontent.com/u/24227892?v=4", radius="xl" ), dmc.Avatar(radius="xl"), dmc.Avatar("MK", color="cyan", radius="xl"), dmc.Avatar(DashIconify(icon="radix-icons:star"), color="blue", radius="xl"), ], ) ``` ### Avatar link with tooltip ```python import dash_mantine_components as dmc from dash import html component = html.A( dmc.Tooltip( dmc.Avatar( src="https://e7.pngegg.com/pngimages/799/987/png-clipart-computer-icons-avatar-icon-design-avatar-heroes" "-computer-wallpaper-thumbnail.png", size="lg", radius="xl", ), label="Snehil Vijay", position="bottom", ), href="https://www.linkedin.com/in/snehilvj/", target="_blank", ) ``` ### Dynamically created AvatarGroup Here's an example of a dynamically created AvatarGroup from GitHub contributors to DMC library. ```python from os import environ import dash_mantine_components as dmc import requests def create_contributors_list(): resp = requests.get( "https://api.github.com/repos/snehilvj/dash-mantine-components/contributors", headers={"authorization": f"token {environ['CONTRIB_TOKEN']}"}, ) contributors = resp.json() children = [] for user in contributors: avatar = dmc.Avatar(src=user["avatar_url"], radius="xl") children.append(avatar) return dmc.AvatarGroup(children, id="avatar-group") component = create_contributors_list() if "CONTRIB_TOKEN" in environ else None ``` ### 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-Avatar-root | Root element | | image | .mantine-Avatar-image | `img` element | | placeholder | .mantine-Avatar-placeholder | Placeholder element, rendered when image cannot be loaded | ### Keyword Arguments #### Avatar - children (a list of or a singular dash component, string or number; optional): Avatar placeholder, displayed when `src={None}` or when the image cannot be loaded. - id (string; optional): Unique ID to identify this component in Dash callbacks. - allowedInitialsColors (list; optional): An array of colors that can be used for autogenerated initials. By default, all default Mantine colors can be used except gray and dark. - alt (string; optional): Image `alt` attribute, also used as `title` attribute for placeholder. - 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`. - 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, default value is `theme.primaryColor`. Set to "initials" to auto generate color based on `name`. - 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 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`. - imageProps (dict; optional): `img` tag attributes. - 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. - name (string; optional): Name of the user. When src is not set, used to display initials and to generate color when color="initials" is set. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set border-radius, `'100%'` by default. - size (number; optional): Width and height of the avatar, numbers are converted to rem, `'md'` by default. - src (string; optional): Image url, if the image cannot be loaded or `src={None}`, then placeholder is displayed instead. - 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`. #### AvatarGroup - children (a list of or a singular dash component, string or number; optional): components. - 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. - 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. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - 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. - spacing (number; optional): Negative space between Avatar components, `'sm'` 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`.