Avatar
Avatars are used to represent an individual, a business, or a celestial being when they interact with any Coingaming brand. While they usually consist of an image, avatars are adaptable - letters or object icons may sometimes be used as fallbacks.
Default
Variants
md
Rounded
md
Different colours
Sizes
xs
sm
md
lg
xl
2xl
Active status
Status origin
Avatar props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| bgColor | string | No | bg-gohan | Background colour |
| color | string | No | text-bulma | Text colour |
| imageUrl | string | No | - | Path to the image |
| isRounded | boolean | No | false | Rounded border radius |
| isStatusActive | boolean | No | false | Active state of status indicator |
| name | string | JSX.Element | No | - | Capital letters of name |
| size | xs | sm | md | lg | xl | 2xl | No | md | Size of avatar |
| statusOrigin | StatusOrigin | No | { vertical: 'bottom', horizontal: 'right' } | Position for status indicator |