Avatar
Initials or image, alone or stacked
- basic usage
AD BO CY
<Avatar label="AD" />
<Avatar label="BO" />
<Avatar label="CY" />- types
AD BO CY DA EV FA
<Avatar label="AD" type="primary" />
<Avatar label="BO" type="secondary" />
<Avatar label="CY" type="success" />
<Avatar label="DA" type="warning" />
<Avatar label="EV" type="danger" />
<Avatar label="FA" type="muted" />- sizes
SM MD LG
AD BO CY
AD BO CY
AD BO CY
<Avatar label="SM" size="small" />
<Avatar label="MD" />
<Avatar label="LG" size="large" />
<AvatarGroup size="small">
<Avatar label="AD" />
<Avatar label="BO" />
<Avatar label="CY" />
</AvatarGroup>
<AvatarGroup>
<Avatar label="AD" />
<Avatar label="BO" />
<Avatar label="CY" />
</AvatarGroup>
<AvatarGroup size="large">
<Avatar label="AD" />
<Avatar label="BO" />
<Avatar label="CY" />
</AvatarGroup>- group
AD BO CY
<AvatarGroup>
<Avatar label="AD" type="primary" />
<Avatar label="BO" type="secondary" />
<Avatar label="CY" type="success" />
</AvatarGroup>- images
<Avatar label="AD" src="https://picsum.photos/id/64/96/96" />
<Avatar label="BO" src="https://picsum.photos/id/91/96/96" />
<Avatar label="CY" src="https://picsum.photos/id/129/96/96" />
<AvatarGroup>
<Avatar label="AD" src="https://picsum.photos/id/64/96/96" />
<Avatar label="BO" src="https://picsum.photos/id/91/96/96" />
<Avatar label="CY" src="https://picsum.photos/id/129/96/96" />
</AvatarGroup>- circles
AD BO CY DA EV FA
<Avatar label="AD" circle={1} />
<Avatar label="BO" circle={2} />
<Avatar label="CY" circle={3} />
<Avatar label="DA" circle={4} />
<Avatar label="EV" circle={5} />
<Avatar label="FA" circle={6} />