Avatar

The Avatar component is used to display a user’s profile picture or personal image, commonly seen in social media, comment sections, or personal settings pages.

In addition to the common scenarios like colors, border, and rounded styles, Tailsee also provides options like dot, icon, and company icon as indicators. On the animation side, it includes some bouncing and ping effects.

Tailsee has implemented common scenarios like avatars in dropdown menus or avatars in cards. Related components includeAvatarGroups.

Basic

Sizes

Different sized avatar components suitable for various scenarios.

Border Style

Avatar component with border for enhanced visual boundaries.

Rounded Style

Rounded avatar component for a softer appearance.

With Dot Indicator

Avatar component with dot indicator for online status or notifications.

With Icon Indicator

Avatar component with icon indicator for user status or role display.

With Company Icon

Avatar with company icon, suitable for corporate users or team displays.

TextPlaceholder

Avatar using text as placeholder, showing user initials when no image is available.

With Media Info

Avatar with media information, typically used in social media or user profile cards.

With Tooltip

Avatar displaying tooltip information on hover.

With Message Count

Avatar with message count indicator for unread notifications.

Animation

Dot Bounce

Avatar with bouncing dot animation for dynamic status indication.

Code snippet not found, please check if the component name is correct

Dot Shake

Avatar with dot shake animation for enhanced visual feedback.

Code snippet not found, please check if the component name is correct

Icon Shake

Avatar with icon shake animation for enhanced interaction.

Code snippet not found, please check if the component name is correct

Ping

Avatar with ping animation effect for notifications.

Code snippet not found, please check if the component name is correct

Bounce

Avatar with overall bounce animation for added visual dynamics.

Code snippet not found, please check if the component name is correct

Tooltips

Animated tooltip effects for enhanced user experience.

Code snippet not found, please check if the component name is correct

Scene

In Dropdown

Avatar embedded in dropdown menus for user switching or selection.

Code snippet not found, please check if the component name is correct

With Dropdown

Avatar with dropdown menu providing additional options.

Code snippet not found, please check if the component name is correct

Lazy Loading

Lazy-loading avatar component for improved page performance.

Code snippet not found, please check if the component name is correct

In Card Profile Animation

Animated avatar in card-style profiles for enhanced visual appeal.

Code snippet not found, please check if the component name is correct