Встроенный бейдж показывает статус или счётчик прямо на аватаре; для метки на произвольном контенте возьмите CdsBadge, а для текстовой метки в строке — CdsTag.

Анатомия

Аватар — это контейнер с одним из трёх видов контента и необязательным бейджем в верхнем углу.

Storybook

Вариации

Контент

Контент задаётся одним из трёх пропсов: image — фотография, icon — иконка, text — инициалы. Если передать несколько, победит image, затем icon.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar } from '@central-design-system/components';
</script>

<template>
  <div class="flex justify-center gap-3">
    <CdsAvatar image="https://i.pravatar.cc/120?img=12" />
    <CdsAvatar icon="user" color="brand-secondary" />
    <CdsAvatar text="ВМ" color="brand-primary" />
  </div>
</template>

Размеры

Свойство size принимает токен от xs до xl или число пикселей. Размер по умолчанию — md.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar } from '@central-design-system/components';

const sizes = CdsAvatar.constants.sizes;
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <div class="flex items-center justify-center gap-2">
      <CdsAvatar v-for="size in sizes" :key="size" :size="size" text="ВМ" color="brand-primary" />
      <CdsAvatar :size="72" text="ВМ" color="brand-primary" />
    </div>

    <div class="flex items-center justify-center gap-2">
      <CdsAvatar v-for="size in sizes" :key="size" :size="size" image="https://i.pravatar.cc/120?img=12" />
      <CdsAvatar :size="72" image="https://i.pravatar.cc/120?img=12" />
    </div>

    <div class="flex items-center justify-center gap-2">
      <CdsAvatar v-for="size in sizes" :key="size" :size="size" icon="user" color="brand-secondary" />
      <CdsAvatar :size="72" icon="user" color="brand-secondary" />
    </div>
  </div>
</template>

Цвета

Свойство color красит фон аватара с инициалами или иконкой: подойдёт токен темы или любой CSS-цвет.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar } from '@central-design-system/components';

const items = [
  { color: 'brand-primary', text: 'BP' },
  { color: 'brand-secondary', text: 'BS' },
  { color: '#0f9d58', text: 'GR' },
  { color: '#db4437', text: 'RD' },
  { color: '#673ab7', text: 'PR' }
];
</script>

<template>
  <div class="flex justify-center gap-2">
    <CdsAvatar v-for="item in items" :key="item.text" size="md" :color="item.color" :text="item.text" />
  </div>
</template>

Бейдж

Свойство badge со значением true показывает точку в углу аватара. Объект передаётся как пропсы CdsBadge: так можно поменять цвет точки, показать счётчик (dot: false и content) или отодвинуть бейдж от края (floating). Слот badge заменяет содержимое бейджа произвольным — например, иконкой.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar, CdsIcon } from '@central-design-system/components';
</script>

<template>
  <div class="flex justify-center gap-3">
    <CdsAvatar size="lg" badge image="https://i.pravatar.cc/120?img=12" />
    <CdsAvatar size="lg" text="АД" color="brand-primary" :badge="{ color: 'status-success-surface' }" />
    <CdsAvatar size="lg" icon="user-group" color="brand-secondary" :badge="{ dot: false, content: 3 }" />
    <CdsAvatar size="lg" text="ОК" color="brand-secondary" :badge="{ dot: false, content: 12, floating: true }" />
    <CdsAvatar size="lg" image="https://i.pravatar.cc/120?img=32" :badge="{ color: 'status-success-surface' }">
      <template #badge>
        <CdsIcon icon="check" />
      </template>
    </CdsAvatar>
  </div>
</template>

Отступы

Свойства start и end добавляют отступ со стороны соседнего контента: start — для аватара в начале строки, end — в конце. Так аватар встаёт в текст без обёрток с внешними отступами.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-col gap-2">
    <div class="flex items-center justify-center">
      <CdsAvatar start size="sm" text="АД" color="brand-primary" />
      <span>Анна Дмитриева оставила комментарий</span>
    </div>

    <div class="flex items-center justify-center">
      <span>Задачу проверяет</span>
      <CdsAvatar end size="sm" image="https://i.pravatar.cc/80?img=32" />
    </div>
  </div>
</template>

Слоты

Слот	Описание
default	Контент аватара. Замещает image, icon и text
badge	Содержимое бейджа. Отображается вместо точки при badge

Рекомендации

Storybook

Сценарии использования

Список участников

В списке людей аватар — быстрый визуальный якорь. Свойство start даёт отступ до текста, фотографии и инициалы чередуются в зависимости от того, что есть у пользователя, а бейдж-точка показывает, кто сейчас в сети.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar } from '@central-design-system/components';

const members = [
  { name: 'Анна Дмитриева', role: 'Менеджер проекта', image: 'https://i.pravatar.cc/80?img=47', online: true },
  { name: 'Павел Соколов', role: 'Аналитик', text: 'ПС', color: 'brand-primary', online: false },
  { name: 'Мария Ильина', role: 'Дизайнер', image: 'https://i.pravatar.cc/80?img=32', online: true },
  { name: 'Служба поддержки', role: 'Общий канал', icon: 'user-group', color: 'brand-secondary', online: false }
];
</script>

<template>
  <div class="m-auto flex w-[350px] flex-col gap-3">
    <div v-for="member in members" :key="member.name" class="flex items-center">
      <CdsAvatar
        start
        :image="member.image"
        :icon="member.icon"
        :text="member.text"
        :color="member.color"
        :badge="member.online && { color: 'status-success-surface' }"
      />

      <div class="flex flex-col">
        <span>{{ member.name }}</span>
        <span class="text-200 text-content-secondary">{{ member.role }}</span>
      </div>
    </div>
  </div>
</template>

Группа участников

Когда участников много, а места мало, аватары складывают в стек с небольшим перекрытием — рамка цвета фона отделяет соседей друг от друга. Последний аватар с text="+3" сообщает, сколько человек не поместилось.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar } from '@central-design-system/components';

const images = [
  'https://i.pravatar.cc/80?img=12',
  'https://i.pravatar.cc/80?img=47',
  'https://i.pravatar.cc/80?img=32',
  'https://i.pravatar.cc/80?img=56'
];
</script>

<template>
  <div class="flex items-center justify-center gap-3">
    <div class="avatar-stack flex items-center">
      <CdsAvatar v-for="image in images" :key="image" :image="image" />
      <CdsAvatar text="+3" color="brand-secondary" />
    </div>

    <span class="text-content-secondary">7 участников</span>
  </div>
</template>

<style scoped>
.avatar-stack .cds-avatar {
  border: 2px solid var(--cds-color-surface-primary);
}

.avatar-stack .cds-avatar:not(:first-child) {
  margin-inline-start: -8px;
}
</style>

Загрузка фото профиля

Пока фотографии нет, аватар показывает инициалы из text — страница не остаётся с пустым кругом. Как только image получает ссылку, фотография замещает инициалы; после удаления фото инициалы возвращаются сами.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar, CdsButton } from '@central-design-system/components';
import { ref } from 'vue';

const image = ref('');
const loading = ref(false);

const upload = async () => {
  loading.value = true;

  await new Promise((resolve) => setTimeout(resolve, 1200));

  image.value = 'https://i.pravatar.cc/160?img=47';
  loading.value = false;
};

const remove = () => {
  image.value = '';
};
</script>

<template>
  <div class="flex items-center justify-center gap-3">
    <CdsAvatar size="xl" :image="image" text="АД" color="brand-primary" />

    <CdsButton v-if="!image" prepend-icon="upload" text="Загрузить фото" :loading="loading" @click="upload" />
    <CdsButton v-else variant="soft" color="neutral" text="Удалить фото" @click="remove" />
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
badge	boolean | CdsBadgeProps | undefined	false	Бейдж аватара. true показывает точку, объект — пропсы CdsBadge.
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
color	string | undefined	—	Цвет компонента
content	string | number | undefined	—	Контент, отображаемый в компоненте.
end	boolean | undefined	—	Добавляет отступ слева — для использования в конце строки контента.
icon	IconValue | undefined	—	Иконка, отображаемая в аватаре, если не задано изображение.
image	string | undefined	—	Источник изображения аватара. Имеет приоритет над icon и text.
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
start	boolean | undefined	—	Добавляет отступ справа — для использования в начале строки контента.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
text	string | number | undefined	—	Текст, отображаемый в компоненте.
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента

Слоты

Имя	Тип	Описание
badge	any	Содержимое бейджа аватара.
default	any	Контент аватара. Переопределяет image, icon и text.