Gravity UI – UIKit

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

You can use Labels for highlighting certain information. A Label with the Close or Copy button may be useful for various simple actions.

Labels are most suitable for displaying one-line text information with different color codes that show its importance.

Appearance

A Label can be displayed in multiple styles.

Theme

Use the theme property to apply different themes for various statuses. You can use the following values: normal, info, success, warning, danger, utility, unknown, and clear. The default theme is normal.

Normal

Info

Success

Warning

Danger

Utility

Unknown

Clear

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


export default function () {
    return (
        <>
            <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>
        </>
    );
}

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

export default function () {
    return (
        <>
            <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

The type property adds various options to a Label:

copy: Adds a copy button; when clicked, it copies the value of the copyText property.

close: Adds a close button for managing label lists.

info: Adds an info icon to the label.

Closable

Copy

Info

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


export default function () {
    return (
        <>
            <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>
        </>
    );
}

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

export default function () {
    return (
        <>
            <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

You can add an icon with the icon property. To do so, use the Icon component, which is a special wrapper for SVGs.

Icon

Icon and close

Icon and copy

import {Icon, Label} from '@gravity-ui/uikit';
import {Gear} from '@gravity-ui/icons';


export default function () {
    return (
        <>
            <Label icon={<Icon size={16} data={Gear} />}>Icon</Label>
            <Label type="close" icon={<Icon size={16} data={Gear} />}>Icon and close</Label>
            <Label type="copy" icon={<Icon size={16} data={Gear} />}>Icon and copy</Label>
        </>
    );
}

import {Icon, Label} from '@gravity-ui/uikit';
import {Gear} from '@gravity-ui/icons';

export default function () {
    return (
        <>
            <Label icon={<Icon size={16} data={Gear} />}>Icon</Label>
            <Label type="close" icon={<Icon size={16} data={Gear} />}>Icon and close</Label>
            <Label type="copy" icon={<Icon size={16} data={Gear} />}>Icon and copy</Label>
        </>
    );
}

Value

You can use Labels for displaying key-value information. For that, you need to provide the key to the children poperty, and value, to value:

Key

Value

Key

Value

Key

Value

Key

Value

Key

Value

Key

Value

Key

Value

Key

Value

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


export default function () {
    return (
        <>
            <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>
        </>
    );
}

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

export default function () {
    return (
        <>
            <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>
        </>
    );
}

State

A label can have different states:

disabled: No interactions allowed.
interactive: Makes the label hoverable.
loading: Shows a loading state.

Default

Disabled

Interactive

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


export default function () {
    return (
        <>
            <Label>Default</Label>
            <Label disabled>Disabled</Label>
            <Label interactive>Interactive</Label>
            <Label loading>Loading</Label>
        </>
    );
}

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

export default function () {
    return (
        <>
            <Label>Default</Label>
            <Label disabled>Disabled</Label>
            <Label interactive>Interactive</Label>
            <Label loading>Loading</Label>
        </>
    );
}

Size

XXS size

XS size

S size

M size

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


export default function () {
    return (
        <>
            <Label size="xxs">XXS size</Label>
            <Label size="xs">XS size</Label>
            <Label size="s">S size</Label>
            <Label size="m">M size</Label>
        </>
    );
}

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

export default function () {
    return (
        <>
            <Label size="xxs">XXS size</Label>
            <Label size="xs">XS size</Label>
            <Label size="s">S size</Label>
            <Label size="m">M size</Label>
        </>
    );
}

Properties

Name	Description	Type	Default
children	Content	`React.ReactNode`
className	`class` HTML attribute	`string`
closeButtonLabel	`aria-label` of the close button	`string`
copyButtonLabel	`aria-label` of the copy button	`string`
copyText	Text to copy	`string`
disabled	Disabled state	`boolean`
icon	Label icon (on the left)	`React.ReactNode`
interactive	Enables hover effect	`boolean`
loading	Loading state	`boolean`	`false`
onClick	`click` event handler	`Function`
onCloseClick	Close button `click` event handler	`Function`
onCopy	`copy` event handler	`Function`
qa	`data-qa` HTML attribute, used for testing	`string`
size	Label size	`"xxs"` `"xs"` `"s"` `"m"`	`"xs"`
theme	Label theme	`string`	`"normal"`
title	`title` HTML attribute	`string`
type	Label type	`"default"` `"copy"` `"close"` `"info"`	`"default"`
value	Label value (displayed as `"children : value"`)	`React.ReactNode`
width	Controls how Label uses parent's space	`"auto"`

Label

§Appearance

§Theme

§Type

§Icon

§Value

§State

§Size

§Properties

Appearance

Theme

Type

Icon

Value

State

Size

Properties