Avatar
An Avatar container to show user photo or initials.
The Avatar component can be used on User Cards or User Menus to display some basic info about a user.
import { Badge } from '@rewind-ui/core';
function App() {
return (
<Avatar color="purple" size="xl" status="online" tone="glossy" initials="DA" />
);
}
Import
Import the Avatar
component using the following import statement.
import { Avatar } from '@rewind-ui/core';
Tones & Colors
The Avatar
component comes with four tones: solid
, light
, glossy
and outline
.
The available color
values are: white
, blue
, red
, green
, yellow
, purple
, gray
, dark
and black
.
Solid
<View>
<Avatar color="white" initials="ND" />
<Avatar color="blue" initials="ND" />
<Avatar color="red" initials="ND" />
<Avatar color="green" initials="ND" />
<Avatar color="yellow" initials="ND" />
<Avatar color="purple" initials="ND" />
<Avatar color="gray" initials="ND" />
<Avatar color="dark" initials="ND" />
<Avatar color="black" initials="ND" />
</View>
Light
<View>
<Avatar tone="light" color="white" initials="ND" />
<Avatar tone="light" color="blue" initials="ND" />
<Avatar tone="light" color="red" initials="ND" />
<Avatar tone="light" color="green" initials="ND" />
<Avatar tone="light" color="yellow" initials="ND" />
<Avatar tone="light" color="purple" initials="ND" />
<Avatar tone="light" color="gray" initials="ND" />
<Avatar tone="light" color="dark" initials="ND" />
<Avatar tone="light" color="black" initials="ND" />
</View>
Glossy
<View>
<Avatar tone="glossy" color="white" initials="ND" />
<Avatar tone="glossy" color="blue" initials="ND" />
<Avatar tone="glossy" color="red" initials="ND" />
<Avatar tone="glossy" color="green" initials="ND" />
<Avatar tone="glossy" color="yellow" initials="ND" />
<Avatar tone="glossy" color="purple" initials="ND" />
<Avatar tone="glossy" color="gray" initials="ND" />
<Avatar tone="glossy" color="dark" initials="ND" />
<Avatar tone="glossy" color="black" initials="ND" />
</View>
Outline
<View>
<Avatar tone="outline" color="white" initials="ND" />
<Avatar tone="outline" color="blue" initials="ND" />
<Avatar tone="outline" color="red" initials="ND" />
<Avatar tone="outline" color="green" initials="ND" />
<Avatar tone="outline" color="yellow" initials="ND" />
<Avatar tone="outline" color="purple" initials="ND" />
<Avatar tone="outline" color="gray" initials="ND" />
<Avatar tone="outline" color="dark" initials="ND" />
<Avatar tone="outline" color="black" initials="ND" />
</View>
Sizes
Available size
values are: xs
, sm
, md
, lg
and xl
.
<View>
<Avatar size="xs" initials="ND" />
<Avatar size="sm" initials="ND" />
<Avatar size="md" initials="ND" />
<Avatar size="lg" initials="ND" />
<Avatar size="xl" initials="ND" />
</View>
Radiuses
Available radius
values are: none
, sm
, base
, md
, lg
and full
.
<View>
<Avatar radius="none" initials="ND" />
<Avatar radius="sm" initials="ND" />
<Avatar radius="base" initials="ND" />
<Avatar radius="md" initials="ND" />
<Avatar radius="lg" initials="ND" />
<Avatar radius="full" initials="ND" />
</View>
Shadows
Available shadow
values are: none
, sm
, base
, md
, lg
and xl
.
<View>
<Avatar shadow="none" initials="ND" />
<Avatar shadow="sm" initials="ND" />
<Avatar shadow="base" initials="ND" />
<Avatar shadow="md" initials="ND" />
<Avatar shadow="lg" initials="ND" />
<Avatar shadow="xl" initials="ND" />
</View>
Shadow colors
Available shadowColor
values are: blue
, red
, green
, yellow
, purple
, gray
, dark
and black
.
<View>
<Avatar shadow="lg" color="blue" shadowColor="blue" initials="ND" />
<Avatar shadow="lg" color="red" shadowColor="red" initials="ND" />
<Avatar shadow="lg" color="green" shadowColor="green" initials="ND" />
<Avatar shadow="lg" color="yellow" shadowColor="yellow" initials="ND" />
<Avatar shadow="lg" color="purple" shadowColor="purple" initials="ND" />
<Avatar shadow="lg" color="gray" shadowColor="gray" initials="ND" />
<Avatar shadow="lg" color="dark" shadowColor="dark" initials="ND" />
<Avatar shadow="lg" color="black" shadowColor="black" initials="ND" />
</View>
Status
Available status
values are: online
, offline
, busy
, away
and none
.
<View>
<Avatar status="online" initials="ND" />
<Avatar status="offline" initials="ND" />
<Avatar status="busy" initials="ND" />
<Avatar status="away" initials="ND" />
<Avatar status="none" initials="ND" />
</View>
Status position
Available statusPosition
values are: top-left
, top-right
, bottom-left
and bottom-right
.
<View>
<Avatar status="online" statusPosition="top-left" initials="ND" />
<Avatar status="online" statusPosition="top-right" initials="ND" />
<Avatar status="online" statusPosition="bottom-left" initials="ND" />
<Avatar status="online" statusPosition="bottom-right" initials="ND" />
</View>
Image
An image can be displayed by passing a url to the src
prop.
src
prop do not forget to add the initials
prop. If the image fails to load the initials will be shown as a fallback strategy.<View>
<Avatar
src="https://avatars.githubusercontent.com/u/810438?s=96&v=4"
initials="DA"
alt="Dan Abramov"
size="xl"
status="online"
/>
</View>
Group
The Avatar.Group
component can be used to display a group of avatars.
<View>
<Avatar.Group>
<Avatar
src="https://avatars.githubusercontent.com/u/4800338?s=96&v=4"
initials="ND"
size="xl"
/>
<Avatar
src="https://avatars.githubusercontent.com/u/810438?s=96&v=4"
initials="ND"
size="xl"
/>
<Avatar
src="https://avatars.githubusercontent.com/u/3624098?s=96&v=4"
initials="ND"
size="xl"
/>
<Avatar
src="https://avatars.githubusercontent.com/u/1365881?s=96&v=4"
initials="ND"
size="xl"
/>
</Avatar.Group>
</View>
Examples
User Card
<View>
<Card radius="lg">
<Card.Body className="flex space-x-3 p-2">
<Avatar
src="https://avatars.githubusercontent.com/u/810438?s=96&v=4"
initials="DA"
alt="Dan Abramov"
status="online"
/>
<div className="flex flex-col">
<div className="font-medium text-gray-700 text-base">Dan Abramov</div>
<div className="text-gray-400 text-sm">@facebook</div>
</div>
</Card.Body>
</Card>
</View>
API Reference
Properties
Prop | Type | Description | Default |
---|---|---|---|
alt | string | Image alt text | undefined |
color | AvatarColor | Sets the color | gray |
initials | string | Initials | undefined |
outlined | boolean | Adds outline | true |
radius | AvatarRadius | Sets the border radius | full |
shadow | AvatarShadow | Sets the shadow size | none |
shadowColor | AvatarShadowColor | Sets the shadow color | none |
size | AvatarSize | Sets the badge size | lg |
src | string | Image url | undefined |
status | AvatarStatus | Adds a status badge | none |
statusPosition | AvatarStatusPosition | Sets the status badge position | bottom-right |
tone | AvatarTone | Sets the badge tone | solid |
Types
type AvatarColor =
| 'white'
| 'blue'
| 'red'
| 'green'
| 'yellow'
| 'purple'
| 'gray'
| 'dark'
| 'black';
type AvatarRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';
type AvatarShadow = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl';
type AvatarShadowColor =
| 'none'
| 'white'
| 'blue'
| 'red'
| 'green'
| 'yellow'
| 'purple'
| 'gray'
| 'dark'
| 'black';
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type AvatarStatus = 'none' | 'online' | 'offline' | 'busy' | 'away';
type AvatarStatusPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
type AvatarTone = 'solid' | 'light' | 'glossy' | 'outline';