Tabler React 2 Docs

Avatars

Avatars

Avatars are used to display a user's profile picture or initials.

Signature

import { Avatar } from "tabler-react-2";


<Avatar {...props}>{children}</Avatar>;

Props

PropRequiredTypeDefaultDescription
srcNoStringThe URL of the avatar image.
initialsNoStringThe initials of the avatar.
initialsColorNoColorThe background color of the initials.
dicebearNoString | BooleanThe style of the avatar.
sizeNo[sm, md, lg]The size of the avatar.
statusNoColorThe status of the avatar.
badgeNoStringThe badge to be displayed on the avatar.
colorNoColorThe color of the avatar.

Basic Usage

The Avatar component is used to display an avatar.

<Avatar src="https://picsum.photos/200" />

Initials

You can pass an initials prop to the Avatar component to display initials.

<Avatar initials="JC" />

Color

You can pass a color prop to the Avatar component to change the color of the avatar.

<Avatar initials="JC" color="primary" />
<Avatar initials="JC" color="secondary" />
<Avatar initials="JC" color="success" />
<Avatar initials="JC" color="danger" />
<Avatar initials="JC" color="warning" />

Initials Color

Note: Unless explicitly required, you should not use the initialsColor prop. Instead, use the color prop.

You can pass an initialsColor prop to the Avatar component to change the color of the initials.

<Avatar initials="JC" initialsColor="cyan" />

Dicebear

You can use Dicebear to generate avatars. You can pass a dicebear attribute to the Avatar component to instruct it to use a Dicebear image. Dicebear will use the initials prop as a seed. When a dicebear style is not provided, it defaults to shapes.

<Avatar dicebear initials="JC" />

Dicebear Styles

You can pass a dicebear prop to the Avatar component to instruct it to use a specific Dicebear style. The dicebear prop accepts a string value of the style name or a boolean.

Dicebear Styles

<Avatar dicebear="bottts" initials="JC" />
<Avatar dicebear="identicon" initials="JC" />
<Avatar dicebear="initials" initials="JC" />
<Avatar dicebear="croodles" initials="JC" />
<Avatar dicebear="dylan" initials="JC" />
<Avatar dicebear="icons" initials="JC" />
<Avatar dicebear="lorelei" initials="JC" />

Styles are at the Dicebear docs page and work out-of-the-box.

Sizes

<Avatar size="sm" initials="JC" />
<Avatar size="md" initials="JC" />
<Avatar size="lg" initials="JC" />

Statuses

You can pass a status prop to the Avatar component to display a badge on the avatar. The status prop accepts a string value color.

<Avatar status="primary" initials="JC" />
<Avatar status="secondary" initials="JC" />
<Avatar status="success" initials="JC" />
<Avatar status="danger" initials="JC" />
<Avatar status="warning" initials="JC" />
<Avatar status="info" initials="JC" />
<Avatar status="dark" initials="JC" />

Badges

You can pass a badge prop to the Avatar component to display a badge on the avatar. Badges require a status prop to be present in order to be displayed.

<Avatar badge={1} status="danger" initials="JC" />
<Avatar badge={2} status="danger" initials="JC" />
<Avatar badge={3} status="danger" initials="JC" />
<Avatar badge={4} status="danger" initials="JC" />
<Avatar badge={5} status="danger" initials="JC" />

Stacked Avatars

You can use the AvatarStackedList component to stack avatars.

import { Avatar, AvatarStackedList } from "tabler-react-2";


<AvatarStackedList>
  <Avatar stacked initials="JC" />
  <Avatar stacked initials="JC" />
</AvatarStackedList>;
Edit this page on GitHub

Prev

Alerts

Next

Badges

On this page