Avatar
An image element with a fallback for representing the user.
Basic Usage
RVCN
Example
Sizes
Use the size prop to control the size of the avatar.
XSSMMDLGXL2XL
Example
Shapes
Use the shape prop to control the shape of the avatar.
CIROSQ
Example
Avatar Group
Use the BrAvatarGroup component to stack avatars together.
U1U2U3
+2
U1U2U3U4
+6
Example
Avatar Badge
Use the BrAvatarBadge component to display a status badge.
RVCNABXY
Example
API
BrAvatar
Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | string | 'md' | Size variants: xs, sm, md, lg, xl, 2xl |
| shape | string | 'circle' | Shape variants: circle, square, rounded |
| bordered | boolean | false | Whether to show a border around the avatar |
BrAvatarImage
Props
| Name | Type | Description |
|---|---|---|
| src | string | The source of the image |
| alt | string | The alt text of the image |
BrAvatarFallback
Props
| Name | Type | Description |
|---|---|---|
| delayMs | number | The delay in milliseconds before the fallback is shown |
BrAvatarGroup
Props
| Name | Type | Default | Description |
|---|---|---|---|
| max | number | - | The maximum number of avatars to show |
| size | string | 'md' | Size of the avatars in the group |
| shape | string | 'circle' | Shape of the avatars in the group |
| bordered | boolean | true | Whether to show a border around the avatars |
BrAvatarBadge
Props
| Name | Type | Default | Description |
|---|---|---|---|
| status | string | 'online' | Status of the avatar: online, offline, busy, away |
| position | string | 'bottom-right' | Position of the badge: top-right, bottom-right, top-left, bottom-left |