# Label



```tsx
import {Label} from '@gravity-ui/uikit';
```

`Label` (лейбл) можно использовать для выделения определенной информации. `Label` с кнопкой `Close` или `Copy` может быть полезен для выполнения различных простых действий.

Лейблы больше всего подходят для отображения однострочной текстовой информации с различными цветовыми кодами, показывающими ее важность.

## Внешний вид

`Label` можно отображать в различных стилях.

### `Theme` (тема)

Свойство `theme` позволяет применять различные темы в зависимости от статуса. Возможные значения: `normal`, `info`, `success`, `warning`, `danger`, `utility`, `unknown` и `clear`.
Тема по умолчанию — `normal`.





```tsx
<Label theme="normal">Normal</Label>
<Label theme="info">Info</Label>
<Label theme="success">Success</Label>
<Label theme="warning">Warning</Label>
<Label theme="danger">Danger</Label>
<Label theme="utility">Utility</Label>
<Label theme="unknown">Unknown</Label>
<Label theme="clear">Clear</Label>
```



### `Type` (тип)

Свойство `type` добавляет различные опции к `Label`:

`copy` — добавляет кнопку копирования, при нажатии на которую копируется значение, указанное в свойстве `copyText`;

`close` — добавляет кнопку закрытия для управления списком лейблов.





```tsx
<Label type="default" onClick={() => alert('On click label')} size="s">Clickable</Label>
<Label type="close" onCloseClick={() => alert('On click close')} size="s">Closable</Label>
<Label type="copy" copyText="Copy" onCopy={() => alert('On copy')} size="s">Copy</Label>
```



### Иконка

Иконку можно добавить с помощью свойства `icon`. Для этого используйте компонент [`Icon`](../Icon), который представляет собой обертку для SVG-файлов.





```tsx
<Label icon={<Icon size={16} data={GearIcon} />}>Icon</Label>
<Label type="close" icon={<Icon size={16} data={GearIcon} />}>Icon and close</Label>
<Label type="copy" icon={<Icon size={16} data={GearIcon} />}>Icon and copy</Label>
```



## Значение

`Label` можно применять для отображения информации в формате `ключ-значение`. Для этого необходимо передать ключ в свойство `children`, а значение — в свойство `value`.





```tsx
<Label theme="normal" value="Value">Key</Label>
<Label theme="info" value="Value">Key</Label>
<Label theme="success" value="Value">Key</Label>
<Label theme="warning" value="Value">Key</Label>
<Label theme="danger" value="Value">Key</Label>
<Label theme="utility" value="Value">Key</Label>
<Label theme="unknown" value="Value">Key</Label>
<Label theme="clear" value="Value">Key</Label>
```



## Состояние

`Label` может иметь разные состояния:

- `disabled` — взаимодействие с лейблом запрещено.
- `interactive` — лейбл становится интерактивным по ховеру.





```tsx
<Label>Default</Label>
<Label disabled>Disabled</Label>
<Label interactive>Interactive</Label>
```



## Размер





```tsx
<Label size="xs">XS size</Label>
<Label size="s">S size</Label>
<Label size="m">M size</Label>
```



## Свойства

| Имя              | Описание                                               |              Тип               | Значение по умолчанию |
| :--------------- | :----------------------------------------------------- | :----------------------------: | :-------------------: |
| children         | Содержимое.                                            |       `React.ReactNode`        |                       |
| className        | HTML-атрибут `class`.                                  |            `string`            |                       |
| closeButtonLabel | `aria-label` кнопки закрытия.                          |            `string`            |                       |
| copyButtonLabel  | `aria-label` кнопки копирования.                       |            `string`            |                       |
| copyText         | Копируемый текст.                                      |            `string`            |                       |
| disabled         | Отключенное состояние.                                 |           `boolean`            |                       |
| icon             | Иконка лейбла (слева).                                 |       `React.ReactNode`        |                       |
| interactive      | Включение эффекта ховера.                              |           `boolean`            |                       |
| onClick          | Обработчик события `click`.                            |           `Function`           |                       |
| onCloseClick     | Обработчик события `click` по кнопке закрытия.         |           `Function`           |                       |
| onCopy           | Обработчик события `copy`.                             |           `Function`           |                       |
| size             | Размер лейбла.                                         |       `"xs"` `"s"` `"m"`       |         `"s"`         |
| theme            | Тема лейбла.                                           |            `string`            |      `"normal"`       |
| type             | Тип лейбла.                                            | `"default"` `"copy"` `"close"` |      `"default"`      |
| value            | Значение лейбла (в виде `"children : value"`).         |            `string`            |                       |
| title            | HTML-атрибут `title`.                                  |            `string`            |                       |
| qa               | HTML-атрибут `data-qa`, используется для тестирования. |            `string`            |                       |