Avatar

PreviousNext

User avatar from name initials or image.

import { Avatar } from "@/rl-ui";

<Avatar name="Ada Lovelace" />

Examples

Sizes

import { Avatar } from "@/rl-ui";

<>
<Avatar name="Ada" size={16} />
<Avatar name="Ada" size={20} />
<Avatar name="Ada" size={24} />
<Avatar name="Ada" size={32} />
</>

Shapes

import { Avatar } from "@/rl-ui";

<>
<Avatar name="Ada Lovelace" shape="circle" size={32} />
<Avatar name="Alan Turing" shape="square" size={32} />
</>

API

PropTypeDefaultDescription
namestring—Used for initials and color hash.
srcstring—Image URL.
size16 | 20 | 24 | 3220Avatar size in px.
shape"circle" | "square""circle"Clip shape.
hideTextbooleanfalseHide initials fallback text.
badgeIconReactNode—Corner badge.