import { Avatar } from '@uhg-abyss/mobile';() => { return <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
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
colorTheme | 1 | 2 | 3 | 4 | undefined | 1 | - | Set the color theme of the Avatar |
imageUrl | string | undefined | - | - | Sets the Avatar image, if one exists |
initials | string | undefined | 'UHG' | - | Sets the users initials to be displayed inside the component, up to two letters |
onPress | Abyss.GestureResponderEventHandler | - | - | Callback fired when the avatar is pressed |
onPressIn | Abyss.GestureResponderEventHandler | - | - | Callback fired at the start of the avatar press |
onPressOut | Abyss.GestureResponderEventHandler | - | - | Callback fired at the end of the avatar press |
showBorder | boolean | undefined | - | - | Adds a border to the Avatar |
size | 'large' | 'small' | undefined | 'small' | - | Sets the size of the Avatar component. Small is 40px, large is 60px |
Avatar Classes
| Class Name | Description |
|---|---|
| abyss-avatar-root | Avatar root element |
| abyss-avatar-image | Avatar image element |
| abyss-avatar-initials | Avatar text 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 |