# UserLabel

Компонент `UserLabel` служит для отображения пользователей и любой связанной с ними информации.

### Тип

Используется для управления внешним видом аватара. Выберите `"person"` для персонализированной сущности или `"email"` для адреса электронной почты. Если аватар не нужен, выберите `"empty"`.





```tsx
<UserLabel type="person">Charles Darwin (person)</UserLabel>
<UserLabel type="email">email@example.com (email)</UserLabel>
<UserLabel type="empty">Alan Turing (other)</UserLabel>
```



### Аватар

`UserLabel` можно использовать с пользовательским аватаром, но только при `type: 'person'`. Можно передать изображение, свойство компонента [Avatar](../Avatar/README.md) или пользовательский узел React.





```tsx
import {GraduationCap} from '@gravity-ui/icons';

<UserLabel type="person" avatar="<url>">Charles Darwin</UserLabel>
<UserLabel type="person" avatar={{icon: GraduationCap}}>Charles Darwin</UserLabel>
```



### Интерактивность

`UserLabel` также поддерживает интерактивные функции, такие как кликабельность и возможность закрытия.





```tsx
<UserLabel onClick={() => alert('onClick triggered')}>Charles Darwin</UserLabel>
<UserLabel onCloseClick={() => alert('onCloseClick triggered')}>Charles Darwin</UserLabel>
```



## Свойства

| Имя          | Описание                                                  |                                        Тип                                         | Значение по умолчанию |
| :----------- | :-------------------------------------------------------- | :--------------------------------------------------------------------------------: | :-------------------: |
| type         | Внешний вид аватара.                                      |                           `'person'` `'email'` `'empty'`                           |      `'person'`       |
| avatar       | Аватар пользователя.                                      | [Свойства аватара](../Avatar/README.md#properties) `string` и `React.ReactElement` |                       |
| children     | Текст, который будет отображен.                           |                                 `React.ReactNode`                                  |                       |
| view         | Внешний вид компонента `UserLabel`.                       |                               `'outlined'` `'clear'`                               |     `'outlined'`      |
| onClick      | Обработчик события `click` для компонента.                |                                     `Function`                                     |                       |
| onCloseClick | Обработчик события `click` для кнопки с иконкой крестика. |                                     `Function`                                     |                       |
| className    | Пользовательский CSS-класс корневого элемента.            |                                      `string`                                      |                       |
| style        | HTML-атрибут `style`.                                     |                               `React.CSSProperties`                                |                       |
| qa           | HTML-атрибут `data-qa`, используется для тестирования.    |                                      `string`                                      |                       |
| size         | Размер аватара.                                           |                          `'xs'` `'s'` `'m'` `'l'` `'xl'`                           |         `'s'`         |

## API CSS

| Имя                          | Описание              |
| :--------------------------- | :-------------------- |
| `--g-user-label-font-size`   | Размер шрифта текста. |
| `--g-user-label-line-height` | Высота строки текста. |