Variants
Example of Avatars - default
React documentation
Last modified:
BcAvatar Props
| Prop | Type | Required? | Default | Description |
|---|---|---|---|---|
alt | string | required | Sets alt text. | |
src | string | required | Avatar source path. | |
className | string | optional | Add custom CSS class(es). | |
accentBorder | string | optional | Adds a colored border to the avatar, a Hex color value, leading with a #, like #900000. | |
background | boolean | optional | false | Sets avatar as background image. |
groupedChild | boolean | optional | false | Uses superimpose a smaller, ‘child’ avatar to the top right of the main one. |
inline | boolean | optional | false | Used to display avatars as an inline component. |
size | string | optional | Sets the size of avatar image. | |
square | boolean | optional | false | Shows avatar in squared shape. |
style | CSS property | optional | Sets custom inline styles. |
BcAvatar size prop
BcAvatar size prop is optional.
Its sizes are:
size value | Description |
|---|---|
xs | Makes it extra-small sized (16×16 px). |
sm | Makes it small sized (24×24 px). |
| (default) | Makes it regular sized (default, 40×40 px). |
lg | Makes it large sized (72×72 px). |
xl | Makes it extra-large sized (128×128 px). |
Any extended types: No
BcAvatar.Group
Superimposes a smaller ‘child’ avatar to the top right of the main one.
BcAvatar.Group will become parent tag for BcAvatar, when used (see Grouped example below).
BcAvatar.Group Props
| Prop | Type | Required? | Default | Description |
|---|---|---|---|---|
className | string | optional | Add custom CSS class(es). | |
inline | boolean | optional | false | Used to display avatars as an inline component. |
size | string | optional | Sets the size of avatar image. |
BcAvatar.Group size Prop
BcAvatar.Group size prop is optional.
Its sizes are:
Group size value | Description |
|---|---|
xs | Makes it extra-small sized, (base image size is 16×16 px,super-imposed image size is 16×16 px). |
sm | Makes it small sized, (base image size is 24×24 px, super-imposed image size is 16×16 px). |
| (default) | Defaults to base image size of 40×40 px, super-imposed image size of 14×14 px. |
lg | Makes it large sized, (base image size is 72×72 px, super-imposed image size is 24×24 px). |
xl | Makes it extra-large sized, (base image size is 128×128 px, super-imposed image size is 16×16 px). |
Any extended types: No.
HTML
Last modified:
Treat avatar images as document or application content.
Add .bc-avatar to an <img> element.
It can also work for elements with a background-image.
Design
Last modified:
Avatars come in 4 sizes (optically in pixels):
| Dimensions | Modifier |
|---|---|
| 16×16 | .bc-avatar--xs |
| 24×24 | .bc-avatar--sm |
| 40×40 | N/A (default) |
| 72×72 | .bc-avatar--lg |
| 128×128 | .bc-avatar--xl |
Avatar dimension units are set in rems.
The following variants are available:
| Variant | Purpose |
|---|---|
.bc-avatar--inline | Used to display avatars as an inline component. |
.bc-avatar--square | Changes the rounding of the border radius to be more square-like. |
.bc-avatar--grouped | Used to superimpose a smaller, ‘child’ avatar to the top right of the main one. |
.bc-avatar--accent-border | Adds a colored border to the avatar. |
Accessibility
Last modified:
When avatars represent a thing it’s important to include ‘alt text’.
For example:
alt="Person’s name"if the avatar represents a useralt="Org name"if the avatar represents an organization.
If the avatar is purely presentational and carries no semantic value, use role='presentation'.
Rationale
Last modified:
Avatars allow users to personalize their accounts.
Avatars can help visually clarify the user associated with an event from a larger set of other users and events.
See also
Last modified: