/
Getting Started
Overview
Design Tokens
Overview
Color
Typography
Unit
Radius
Shadow
Viewport
Components
Accordion
Alert
Avatar
Badge
Breadcrumbs
Button
Card
Carousel
Checkbox
Divider
Dropdown menu
Link
Loader
Menu item
Modal
Overlay
Popover
Progress
Radio
Select
Switch
Tabs
Text Area
Text Field
Toast
Tooltip
Utilities
Action Bar
Actionable
Aspect ratio
Backdrop
Container
Dismissible
Form control
Hidden
Hidden visually
Icon
Image
Text
Theme provider
View
Hooks
useElementId
useFormControl
useRTL
useScrollLock
useTheme
useToggle

Avatar

Thumbnail of a user photo, organization, or a visual representation of other types of content.
Import
import { Avatar } from "@uicapsule/components";
import type { AvatarProps } from "@uicapsule/components";
Related components
Image
Storybook
Avatar stories
Supports responsive size values

Automatically uses presentation role if aria-label is not provided



Usage

Avatar displays a masked image when src is passed to it. It uses the image as a decorative element, assuming that its text description comes from the adjacent elements. If there is no text content available and you need to make it accessible for screen-readers, you can provide an aria-label attribute to it.

<Avatar

  src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png"

  attributes={{ "aria-label": "Dmitry Belyaev" }}

/>

When the image for the avatar is not available for display, you can use the initials fallback.

<Avatar

  initials="DB"

  color="neutral"

  attributes={{ "aria-label": "Dmitry Belyaev" }}

/>

Another fallback option that can be used when you don't have an image for the Avatar is to use an icon. This approach can be used for displaying company logotypes or as a thumbnail for content sections.

<Avatar icon={IconZap} color="neutral" />

Colors

You can assign one of the color tokens to be used as background in Avatar, which will be visible for initials and icon fallbacks.

<View direction="row" gap={3}>

  <Avatar color="neutral" initials="DB" />

  <Avatar color="neutral-faded" initials="DB" />

  <Avatar color="positive" initials="DB" />

  <Avatar color="positive-faded" initials="DB" />

  <Avatar color="critical" initials="DB" />

  <Avatar color="critical-faded" initials="DB" />

  <Avatar color="primary" initials="DB" />

  <Avatar color="primary-faded" initials="DB" />

</View>

Sizes

Avatar has a dynamic size property that supports any number value and automatically adjusts typography and icon sizes.

<View direction="row" gap={3}>

  <Avatar size={8} initials="DB" color="neutral" />

  <Avatar size={12} initials="DB" color="neutral" />

  <Avatar size={16} initials="DB" color="neutral" />

</View>

Avatar supports responsive syntax for its size property, which means you can change its size based on the viewport. Changing it will automatically adjust the size of its contents.

<Avatar icon={IconZap} size={{ s: 10, l: 20 }} />

Shape

Avatar can be rendered using a square shape with a squared property.

<Avatar squared initials="DB" color="neutral" />

Accessibility

  • Avatar is a decorative image by default and changes to img role when alt property is passed
Previous
Alert
Next
Badge