import { Avatar } from '@uhg-abyss/mobile';<Avatar />Images
Use the imageUrl prop to set the Avatar image. This can be used to create a co-branded avatar.
Co-branded Avatars
Color Theme
Use the colorTheme prop to set the color of the Avatar.
The options are 1 (blue), 2 (green), 3 (orange), and 4 (light blue). The default is 1 (blue).
Size
Use the size prop to set the size of the Avatar.
The 2 options are small, large. The default is small.
Notification
Use the Indicator component with the Avatar to display a notification. See Indicator for more details and examples.
Show border
Use the showBorder prop to add a border to the Avatar.
Avatar Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| colorTheme | 1 | 2 | 3 | 4 | 1 | Set the color theme of the Avatar |
| imageUrl | string | - | Sets the Avatar image, if one exists |
| initials | string | - | Sets the users initials to be displayed inside the component, up to two letters |
| showBorder | boolean | false | Adds a border to the Avatar |
| size | "large" | "small" | "small" | Sets the size of the Avatar component. Small is 40px, large is 60px |
Avatar Classes
| Class Name | Description |
|---|---|
| abyss-avatar-image | Avatar image element |
| abyss-avatar-initials | Avatar text element |
| abyss-avatar-root | Avatar root element |
Dynamic Type
The avatar text will scale up to 3XL.
Avatar Tokens
| Token Name | Value | |
|---|---|---|
| avatar.color.surface.container.emphasis1.rest | #F7FCFD | |
| avatar.color.surface.container.emphasis1.active | #F1F6F7 | |
| avatar.color.surface.container.emphasis2.rest | #EFF6EF | |
| avatar.color.surface.container.emphasis2.active | #E6F5E6 | |
| avatar.color.surface.container.emphasis3.rest | #FAF8F2 | |
| avatar.color.surface.container.emphasis3.active | #F5F3ED | |
| avatar.color.surface.container.emphasis4.rest | #EEF8FB | |
| avatar.color.surface.container.emphasis4.active | #E4F1F5 | |
| avatar.color.border.container | #002677 | |
| avatar.color.text.label | #002677 | |
| avatar.border-radius.all.container | 500 | |
| avatar.border-width.container | 1 | |
| avatar.sizing.all.container | 40 | |
| avatar.spacing.padding.all.container | 4 |