Avatar

FormHelperText can be used for providing additional context to your input fields.

Import

import { Avatar } from "@sparrowengg/twigs-react";

Usage

Result

Loading...

Live EditorOpen in playground

<Avatar
  src="https://randomuser.me/api/portraits/men/35.jpg"
  name="John Doe"
  size="5xl"
/>

Avatar Badge

Result

Loading...

Live EditorOpen in playground

<Avatar
  src="https://randomuser.me/api/portraits/men/35.jpg"
  name="John Doe"
  size="xl"
>
  <AvatarBadge />
</Avatar>

Avatar Group

Result

Loading...

Live EditorOpen in playground

<AvatarGroup size="2xl">
  <Avatar
    src="https://randomuser.me/api/portraits/men/35.jpg"
    name="John Doe"
  />
  <Avatar src="https://randomuser.me/api/portraits/men/34.jpg" name="Sam" />
  <Avatar src="https://randomuser.me/api/portraits/men/32.jpg" name="Adam" />
</AvatarGroup>

Props

Avatar

Property	Description	Type	Default
size	size of avatar	xs sm md lg xl 2xl 3xl 4xl 5xl	sm
src	image URL	string
name	name of the user	string
rounded	border radius	xs sm md lg xl 2xl 3xl full	full

AvatarGroup

Property	Description	Type	Default
size	size of avatar	xs sm md lg xl 2xl 3xl 4xl 5xl	sm
rounded	border radius	xs sm md lg xl 2xl 3xl full	full
limitExceededLabel	Custom label for limit exceeded count	string