Avatar

Guidelines
React API Reference
Blazor API Reference

Avatars are visual representations of users or entities, typically displayed as a profile image or, when unavailable, a fallback such as initials or an icon. They help users quickly identify people or objects in lists, comments, navigation, and more.

Guidance

Aspect	Best Practice
Usage	Use avatars to represent users, teams, or entities. Always provide a fallback for missing images.
Content	Use clear, accessible alternate text for images. Fallbacks should be meaningful, such as initials or icons.
Behavior	Show the image if available; otherwise, display the fallback.
Sizing	Choose sizes appropriate for the context (e.g., small for lists, large for profiles).
Feedback	Ensure avatars load quickly and fallback gracefully if the image fails.
Examples	User profile pictures, team icons, entity representations in lists or cards.

Best Practices

Always Provide a Fallback: Ensure that if the image fails to load, a fallback (such as initials or an icon) is displayed.
Accessible Alternate Text: Use descriptive alt text for images to support screen readers.
Consistent Sizing: Use consistent avatar sizes within the same context for a harmonious UI.
Meaningful Fallbacks: Fallback content should be easily associated with the user or entity (e.g., initials, not just a generic icon).
Not for Decoration: Use avatars for representation, not for purely decorative images.

Do’s and Don’ts

Do

Use avatars to represent users or entities.
Provide a fallback for missing or broken images.
Use accessible and descriptive alternate text.
Keep avatar sizes consistent within a context.

Don't

Use avatars for decorative images only.
Omit fallback content.
Use ambiguous or missing alternate text.
Use inconsistent sizing for avatars in the same context.

Additional Guidance

Accessibility: Always provide alt text for images. Fallbacks should be meaningful and not empty.
Performance: Optimize avatar images for fast loading.
Visual Clarity: Ensure avatars are visually distinct and easy to recognize, especially in dense lists.

Import

import {
  Avatar,
  AvatarImage,
  AvatarFallback
} from '@strongtie/design-system/avatar';

Usage

<Avatar>
  <AvatarImage src="/images/avatar.png" alt="Avatar" />
  <AvatarFallback>S</AvatarFallback>
</Avatar>

`<Avatar>` Props

asChild

boolean

Render the avatar as a child of another element.

`<AvatarImage>` Props

src

string

Image source URL.

alt

string

Alternate text for the image. Required for accessibility.

asChild

boolean

Render the image as a child of another element.

`<AvatarFallback>` Props

asChild

boolean

default:"false"

Change the default rendered element for the one passed as a child

delayMs

number

Delay (in milliseconds) before rendering the fallback. Useful to avoid flashes for users with slow connections.

Usage Examples

<Avatar>
  <AvatarImage src="/images/avatar.png" alt="Avatar" />
  <AvatarFallback>S</AvatarFallback>
</Avatar>

Styling Classes

The following CSS classes are applied by the components:

avatar – Root avatar container (Avatar)
avatar-image – Image element (AvatarImage)
avatar-fallback – Fallback element (AvatarFallback)

For more examples, visit the Storybook.

Example

<StudsAvatar Image="https://images.unsplash.com/photo-1740252117070-7aa2955b25f8?&w=128&h=128&dpr=2&q=80" />
<StudsAvatar Text="JD" />

`<StudsAvatar>` Parameters

Image

string

Gets or sets the image source URL for the avatar.

Text

string

Gets or sets the text to display when no image is provided. Typically initials or a short identifier.

AlternateText

string

default:"avatar"

Gets or sets the alternate text for the image, used for accessibility.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

Usage Examples

<StudsAvatar Image="https://images.unsplash.com/photo-1740252117070-7aa2955b25f8?&w=128&h=128&dpr=2&q=80" />

Styling Classes

The following CSS class is applied by the component:

avatar – Root avatar container

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

`<Avatar>` Props

`<AvatarImage>` Props

`<AvatarFallback>` Props

Usage Examples

Styling Classes

`<StudsAvatar>` Parameters

Usage Examples

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​<Avatar> Props

​<AvatarImage> Props

​<AvatarFallback> Props

​Usage Examples

​Styling Classes

​<StudsAvatar> Parameters

​Usage Examples

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

`<Avatar>` Props

`<AvatarImage>` Props

`<AvatarFallback>` Props

Usage Examples

Styling Classes

`<StudsAvatar>` Parameters

Usage Examples

Styling Classes