Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsAvatar
Designer doc
A component to display avatar image.
Example
Basic Usage
Default Avatar is circled with size 28px. It can be disabled.
View code
Initials
When there is no available avatar image, can consider to use the first letter of the first two words of an object as replacement. Initials will be in uppercase and only allow up to maximum 2 character. Use color and colorType to customize background while fontColor and fontSize can customise the text. If both src and initials is provided, initials will only show when src fail to load.
View code
Default recommended sizes and colors
For Avatar with initials, there are 5 recommended color, can make use of them for different user avatar, customize the same background color for the same object. Different sizes come with different font size. For squared Avatar, different sizes come with different border radius.
20
24
28
32
48
72
140
20
24
28
32
48
72
20
24
28
32
48
72
140
View code
Avatar group
AvatarGroup should display at most 5 avatars.
20
24
28
32
20
24
28
32
View code
Radius
Default circle shaped Avatar have radius set as 50%. radius can be set for different shaped Avatar.
View code
Fallback
When src fails to load, it will try to display the initials. If no initials, it will try to display fallback if provided. If fallback also fails, it will display the children (when children is empty will be grey background) if not specified.
empty
initials
fallback
icon
icon
View code
API
Avatar
| Prop name | Type | Default | Description |
|---|---|---|---|
| alt | string | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| color | string | ||
| colorType | ColorTypes | initials ? 'semMod1st' : 'semNeu1st' | |
| disabled | boolean | ||
| fallback | string | ||
| fontColor | string | ||
| fontSize | number | ||
| imgProps | ImgHTMLAttributes<HTMLImageElement> & { ref?: Ref<HTMLImageElement>; } | ||
| initials | string | ||
| radius | string | number | ||
| size | number | 28 | |
| src | string | ||
| timeout | number | @deprecated This option often makes testing break |
AvatarGroup
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| avatarRadius | string | number | ||
| avatarSize | number | 28 | |
| corner | boolean | ||
| gap | number | When gap is set to 0, separator will be rendered |