Avatar

import { AXAvatarModule } from '@acorex/components/avatar';

Avatar component is used to visually represent individuals or objects, typically through an image or icon. It is often employed to display profile pictures, user icons, or other relevant images in a user interface, helping to personalize and enhance the visual experience

Overview

In this section, you can test different options of this component and see the output in real time

Color

Primary

Look

Twotone

Shape

Rounded

Type

Text

Usage

A simple example of using ax-avatar

Preview

Code

Size

You can set text ax an avatar.

Preview

Code

Text Mode

You can set text ax an avatar.

Preview

Code

Icon Mode

You can set icon ax an avatar.

Preview

Code

Image Mode

You can display a photo as an avatar.

Preview

Code

Look

All looks avatar that you can use.

Preview

Code

Avatar Group

integration of avatar that you can use.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-avatar-bg-color	var(--ax-sys-color-#{$name}-lightest-surface)	Background color of the avatar. Uses a theme color.
--ax-comp-avatar-border-color	var(--ax-sys-color-#{$name}-lightest-surface)	Border color of the avatar. Uses a theme color.
--ax-comp-avatar-fill-color	var(--ax-sys-color-on-#{$name}-lightest-surface)	Fill color for elements (e.g., icons) within the avatar. Uses a theme color.
--ax-comp-avatar-text-color	var(--ax-sys-color-on-#{$name}-lightest-surface)	Text color within the avatar. Uses a theme color.

Props

color	string	primary	Sets the color theme of the avatar.
look	AXStyleLookType	rounded	Determines the appearance of the avatar.
size	number	48	Sets the size of the avatar.