Avatar

The Avatar component is used to represent a user. It displays a profile picture, or falls back to the user's initials if a profile pic is not provided.

Usage

The most basic instance of an Avatar requires a src image and a title to be used for accessibility or as a fallback in case the image can't be loaded.

<span class="drac-avatar drac-bg-green-transparent drac-text-green"
  ><span
    class="drac-avatar-background"
    style="
      background-image: url(https://ui.draculatheme.com/static/images/avatar.png);
    "
  ></span
></span>
<Avatar
  title="Count Dracula"
  src="https://ui.draculatheme.com/static/images/avatar.png"
/>;

Colors

The Avatar component accepts a *color* param that allows for customizing the background and accent color for an Avatar.

<span class="drac-avatar drac-bg-cyan-transparent drac-text-cyan"
  ><span
    class="drac-avatar-background"
    style="
      background-image: url(https://ui.draculatheme.com/static/images/avatar.png);
    "
  ></span
></span>
<Avatar
  src="https://ui.draculatheme.com/static/images/avatar.png"
  title="Count Dracula"
  color="cyan"
/>;

Variants

Avatars accept multiple variants, which can be used to render a more subtle variation of the Avatar component.

<div>
  <span class="drac-avatar drac-bg-green-transparent drac-text-green drac-mb-sm"
    ><span
      class="drac-avatar-background"
      style="
        background-image: url(https://ui.draculatheme.com/static/images/avatar.png);
      "
    ></span></span
  ><span
    class="drac-avatar drac-bg-green-transparent drac-text-green drac-avatar-subtle"
    ><span
      class="drac-avatar-background"
      style="
        background-image: url(https://ui.draculatheme.com/static/images/avatar.png);
      "
    ></span
  ></span>
</div>
<div>
  <Avatar
    src="https://ui.draculatheme.com/static/images/avatar.png"
    title="Count Dracula"
    variant="normal"
    mb="sm"
  />
  <Avatar
    src="https://ui.draculatheme.com/static/images/avatar.png"
    title="Count Dracula"
    variant="subtle"
  />
</div>;

Borders

A border variant allows for customization of the border width of an Avatar, or for an Avatar to be rendered without a border.

<div>
  <span
    class="drac-avatar drac-bg-green-transparent drac-text-green drac-avatar-lg-stroke drac-mb-sm"
    ><span
      class="drac-avatar-background"
      style="
        background-image: url(https://ui.draculatheme.com/static/images/avatar.png);
      "
    ></span></span
  ><span
    class="drac-avatar drac-bg-green-transparent drac-text-green drac-avatar-no-border"
    ><span
      class="drac-avatar-background"
      style="
        background-image: url(https://ui.draculatheme.com/static/images/avatar.png);
      "
    ></span
  ></span>
</div>
<div>
  <Avatar
    src="https://ui.draculatheme.com/static/images/avatar.png"
    title="Count Dracula"
    borderVariant="large"
    mb="sm"
  />
  <Avatar
    src="https://ui.draculatheme.com/static/images/avatar.png"
    title="Count Dracula"
    borderVariant="none"
  />
</div>;

Properties

title (required)

The title or name to be used in the avatar.

string
color

The theme color for the avatar. This property controls the border and glow colors for the component.

"purpleCyan" | "yellowPink" | "cyanGreen" | "pinkPurple" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white" | "black" | "blackSecondary" | "blackLight"
variant

The variant property allows for consumers to choose from a regular avatar, or a subtle variation.

"normal" | "subtle"
borderVariant

Allows for controlling the border of the avatar. `large` -> to use a thicker border. `none` -> hides the border.

"normal" | "large" | "none"
src

Sets the source for the profile picture.

string