Components
Avatar
import { Avatar } from "@eggspot/ui"
Colors
<Avatar color={Avatar.colors.base}></Avatar>
<Avatar color={Avatar.colors.primary}></Avatar>
<Avatar color={Avatar.colors.success}></Avatar>
<Avatar color={Avatar.colors.warning}></Avatar>
<Avatar color={Avatar.colors.danger}></Avatar>
Name
J
SM
M
M
S
<Avatar color={Avatar.colors.base} name="James"></Avatar>
<Avatar color={Avatar.colors.primary} name="Spider Man"></Avatar>
<Avatar color={Avatar.colors.success} name="Mavis"></Avatar>
<Avatar color={Avatar.colors.warning} name="Me"></Avatar>
<Avatar color={Avatar.colors.danger} name="Skymavis"></Avatar>
Sizes
<Avatar color={Avatar.colors.base} size={Avatar.sizes.small}></Avatar>
<Avatar
color={Avatar.colors.primary}
size={Avatar.sizes.medium}
></Avatar>
<Avatar
color={Avatar.colors.success}
size={Avatar.sizes.large}
></Avatar>
Image
<Avatar
color={Avatar.colors.base}
src="https://via.placeholder.com/600x400"
alt="This is image"
></Avatar>
<Avatar
color={Avatar.colors.primary}
srcSet="https://via.placeholder.com/300x200, https://via.placeholder.com/600x400"
alt="This is image"
></Avatar>
Icon
<Avatar color={Avatar.colors.base} icon={SvgAlarmIcon}></Avatar>
<Avatar color={Avatar.colors.primary} icon={SvgAlarmIcon}></Avatar>
<Avatar color={Avatar.colors.success} icon={SvgAlarmIcon}></Avatar>
<Avatar color={Avatar.colors.warning} icon={SvgAlarmIcon}></Avatar>
<Avatar color={Avatar.colors.danger} icon={SvgAlarmIcon}></Avatar>
Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| color | Colors | Customized color for icon or name of Avatar | base |
| size | Sizes | Size of Avatar element | medium |
| src | string | The image URL | - |
| srcSet | boolean | One or more strings separated by commas, indicating possible image sources. | - |
| alt | string | An alternative text description of the image | false |
| name | string | Username to render text inside the Avatar | - |
| icon | React.FC<SvgIconProps> | Can use customized SvgIcon or any icon from Eggspot icon pack | - |
Types
Colors type
type Intents = 'base' | 'primary' | 'success' | 'warning' | 'danger';
Sizes type
type Sizes = 'small' | 'medium' | 'large';