Avatars
Summary
Avatars are used to add a human touch and instant clarity when understanding which user did what in the application. We also use avatars for projects, repositories, spaces and other container metaphors within Atlassian Apps.
Status
API status: | general |
---|---|
Web resource key: |
com.atlassian.auiplugin:aui-avatar
|
AMD Module key: | N/A |
Experimental API: | 5 |
General API: | 5.1 |
Examples
The avatars have 7 size options: xsmall, small, medium, large, xlarge, xxlarge, xxxlrge
Usage
An avatar can be used like an HTML composition or a web component (since 9.4.1).
HTML
If avatars are added like an HTML composition, they are created with <span>
and specific class names. See below on how to use it.
Variations
User avatars
Project avatars
Avatars can be used for "container" objects — projects, spaces, repositories, etcetera — to give them a recognisable visual identity.
Behaviour
Textual descriptions of avatars
An avatar must include a textual description of the concept it represents so that its meaning can be conveyed and understood in non-visual contexts as well.
-
In most cases, the avatar's
<img>
tag should include analt
attribute describing the image. -
In cases where the avatar is logically grouped with text content that describes the concept
(for example, in a page header), the avatar is effectively decorative.
In such cases, you should provide an empty
alt
attribute description.
Badged content
Avatars may have a single additional element overlaid in one of their four corners.
Use badged content to represent the type, permission, presence, or other contextually relevant information about the user or container.
The badged content must also include a textual description of the information it represents so that its meaning can be conveyed and understood in non-visual contexts as well.
Web Component
Avatar
If avatars are added like a web component, they are created with a specific tag <aui-avatar>
. The avatars variations are created with specific attributes.
Variations
User avatars
Default example
Examples with attributes
Project avatars
Behaviour
Textual descriptions of avatars
An avatar must include a textual description of the concept it represents so that its meaning can be conveyed and understood in non-visual contexts as well.
-
In most cases, the avatar's
<img>
tag should include analt
attribute describing the image. -
In cases where the avatar is logically grouped with text content that describes the concept
(for example, in a page header), the avatar is effectively decorative.
In such cases, you should provide an empty
alt
attribute description.
Avatar's badged
Avatars may have a single additional element overlaid in one of their four corners.
To add badged to avatar should be used the 'aui-avatar-badged' component. It is an internal avatar component and it has to contain an SVG path or <img>
.
The position of badged is determined by the placement attribute
Avatars Group
The avatars can be a group in a stack. If the number of avatars is greater than 4, then a badge with a number will appear at the end of the stack. This number shows how many avatars are hidden.
You can add an avatar group with <aui-avatar-group>
.
You can declare the size of an avatar group with the "size" attribute (sets the size of all avatars in the stack).
Options
Avatar component attributes
Attribute | Description | Possible Value | Type | Default |
---|---|---|---|---|
size | Set the avatar size. | xmsall, small, medium, large, xlarge, xxlarge, xxxlarge | string | medium |
type | Set avatar type. | user, project | string | user |
Attributes for custom avatar image
Attribute | Description | Type | Default |
---|---|---|---|
src | Set custom image for avatar | string | Default image, such as in the avatar example in the documentation above. |
alt | Set alternative text for image | string | |
title | Custom title for avatar image | string |
Avatar badged component attributes
Attribute | Description | Possible Value | Type | Default |
---|---|---|---|---|
placement | Set avatar badged position | top-start, top-end, bottom-start, bottom-end | string | bottom-end |
Avatar group attribute
Attribute | Description | Possible Value | Type | Default |
---|---|---|---|---|
size | Set the avatars group size (with all avatars in the group) | xsmall, small, medium, large, xlarge, xxlarge, xxxlarge | string | medium |