Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. Read about intended use and customization.
Properties#
Avatar properties#
| Type | Description | |
|---|---|---|
size | "small" "medium" "large" "x-large" | (optional) Size of the Avatar. Options: small | medium | large | x-large. Defaults to medium. |
children | React.ReactNode | (optional) Content of the component. |
alt | string | (optional) Used in combination with src to provide an alt attribute for the img element. |
src | string | (optional) Specifies the path to the image. |
imgProps | ImgProps | (optional) Image properties applied to the img element if the component is used to display an image. |
icon | string Icon | (optional) An icon name or component (will override the src property). |
variant | "primary" "secondary" "tertiary" | (optional) Override the variant of the component. Options: primary | secondary | tertiary. Defaults to primary. |
hasLabel | boolean | (optional) If aria-hidden is set to true or if a label is given, typically inside a table or dl (definition list), then you can disable Avatar.Group as a dependent of Avatar. Use true to omit the Avatar group required: warning. |
backgroundColor | string | (optional) Define a custom background color, instead of a variant. Use a Eufemia color. |
color | string | (optional) Define a custom color to complement the backgroundColor. Use a Eufemia color. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
Space | Various | (optional) Spacing properties like top or bottom are supported. |
Avatar.Group properties#
| Type | Description | |
|---|---|---|
label | string | (required) The label description of the group of avatars. |
size | "small" "medium" "large" "x-large" | (optional) Size of the Avatars, and "elements hidden text (+x)". Options: small | medium | large | x-large. Defaults to medium. |
variant | "primary" "secondary" "tertiary" | (optional) Override the variant of the Avatars. Options: primary | secondary | tertiary. Defaults to primary. |
backgroundColor | string | (optional) Define a custom background color for the Avatars, instead of a variant. Use a Eufemia color. |
color | string | (optional) Define a custom color to complement the backgroundColor for the Avatars. Use a Eufemia color. |
maxElements | number | (optional) Number of max displayed elements, including the "elements hidden text (+x)". Defaults to 4. |
children | React.ReactNode | (optional) The Avatars to group. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
Space | Various | (optional) Spacing properties like top or bottom are supported. |