Avatars are used to represent a user or a brand. They are used in the header, sidebar, and in the chat.

Avatar
import Avatar from "@radui/ui/Avatar"

const AvatarExample = () => (
    <div style={{ display: 'flex', gap: 20 }}>
        <Avatar src="https://i.pravatar.cc/1000" />
        <Avatar fallback="RU" />
        <Avatar fallback="AA" color='pink'/>
    </div>
)
  • Adds a fallback if the image is not available
  • SSR compatible

PropTypeDefaultDescription

src

stringnullURL of the image to be displayed as the avatar.

fallback

stringnullText initials or placeholder displayed when the image fails to load or if no src is provided.

color

stringnullAccent Color of the text initials or placeholder displayed when the image fails to load or if no src is provided.
Edit this page on GitHub