Label

Maintainer:
goshander
GitHub
theme
type
size
disabled
interactive
value
copyText
children
import {Label} from '@gravity-ui/uikit';

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

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

Внешний вид

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

Theme (тема)

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

Normal
Info
Success
Warning
Danger
Utility
Unknown
Clear
<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 — добавляет кнопку закрытия для управления списком лейблов;

info — добавляет иконку информации к лейблу.

Closable
Copy
Info
<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>
<Label type="info" size="s">Info</Label>

Иконка

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

Icon
Icon and close
Icon and copy
<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.

Key
:
Value
Key
:
Value
Key
:
Value
Key
:
Value
Key
:
Value
Key
:
Value
Key
:
Value
Key
:
Value
<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 — лейбл становится интерактивным по ховеру.
Default
Disabled
Interactive
<Label>Default</Label>
<Label disabled>Disabled</Label>
<Label interactive>Interactive</Label>

Размер

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

Свойства

ИмяОписаниеТипЗначение по умолчанию
childrenСодержимое.React.ReactNode
classNameHTML-атрибут class.string
closeButtonLabelaria-label кнопки закрытия.string
copyButtonLabelaria-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" "info""default"
valueЗначение лейбла (в виде "children : value").string
titleHTML-атрибут title.string
qaHTML-атрибут data-qa, используется для тестирования.string