Gravity UI – UIKit

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

Theme

normal: Main theme (used by default).

info: Used for any kind of regular information.

success: Used for positive information.

warning: Used for information that needs attention.

danger: Used for critical errors.

utility: Used for useful tips.

clear: No styles, suitable for usage in other components (for example, as content in Popover)

Normal

Normal theme

Info

Info theme

Success

Success theme

Warning

Warning theme

Danger

Danger theme

Utility

Utility theme

Clear

Clear theme

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


export default function () {
    return (
        <>
            <Alert theme="normal" title="Normal" message="Normal theme" />
            <Alert theme="info" title="Info" message="Info theme" />
            <Alert theme="success" title="Success" message="Success theme" />
            <Alert theme="warning" title="Warning" message="Warning theme" />
            <Alert theme="danger" title="Danger" message="Danger theme" />
            <Alert theme="utility" title="Utility" message="Utility theme" />
            <Alert theme="clear" title="Clear" message="Clear theme" />
        </>
    );
}

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

export default function () {
    return (
        <>
            <Alert theme="normal" title="Normal" message="Normal theme" />
            <Alert theme="info" title="Info" message="Info theme" />
            <Alert theme="success" title="Success" message="Success theme" />
            <Alert theme="warning" title="Warning" message="Warning theme" />
            <Alert theme="danger" title="Danger" message="Danger theme" />
            <Alert theme="utility" title="Utility" message="Utility theme" />
            <Alert theme="clear" title="Clear" message="Clear theme" />
        </>
    );
}

View

filled: Used to adjust the background color of the alert (used by default).

outlined: Used to adjust the border color of the alert.

Filled

Filled view

Outlined

Outlined theme

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


export default function () {
    return (
        <>
            <Alert title="Filled" message="Filled view" view="filled" />
            <Alert title="Outlined" message="Outlined theme" view="outlined" />
        </>
    );
}

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

export default function () {
    return (
        <>
            <Alert title="Filled" message="Filled view" view="filled" />
            <Alert title="Outlined" message="Outlined theme" view="outlined" />
        </>
    );
}

Layout

vertical: Used to direct users to content if there is an actions property with buttons. It enables showing buttons below the text (used by default).

horizontal: Used to direct users to content if there is an actions property with buttons. It enables showing buttons to the right of the text.

Vertical

Vertical direction

Horizontal

Horizontal direction

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


export default function () {
    return (
        <>
            <Alert
                layout="vertical"
                title="Vertical"
                message="Vertical direction"
                actions={<Alert.Action>button</Alert.Action>}
            />
            <Alert
                layout="horizontal"
                title="Horizontal"
                message="Horizontal direction"
                actions={<Alert.Action>button</Alert.Action>}
            />
        </>
    );
}

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

export default function () {
    return (
        <>
            <Alert
                layout="vertical"
                title="Vertical"
                message="Vertical direction"
                actions={<Alert.Action>button</Alert.Action>}
            />
            <Alert
                layout="horizontal"
                title="Horizontal"
                message="Horizontal direction"
                actions={<Alert.Action>button</Alert.Action>}
            />
        </>
    );
}

Corners

rounded: Enables rounded corners of the alert window (used by default).

square: Enables squared corners of the alert window.

Rounded

Rounded corners

Square

Square corners

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


export default function () {
    return (
        <>
            <Alert title="Rounded" message="Rounded corners" corners="rounded" />
            <Alert title="Square" message="Square corners" corners="square" />
        </>
    );
}

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

export default function () {
    return (
        <>
            <Alert title="Rounded" message="Rounded corners" corners="rounded" />
            <Alert title="Square" message="Square corners" corners="square" />
        </>
    );
}

Alert title

title: Alert title. It has a lower priority than Alert.Title.

some text

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


export default function () {
    return <Alert title={<Alert.Title className={'some-class'} text="some text" />} />;
}

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

export default function () {
    return <Alert title={<Alert.Title className={'some-class'} text="some text" />} />;
}

Alert message

message: Alert message. It should be meaningful enough to fully explain what the alert is about.

`onClose`

onClose: Callback function called when a user clicks the alert's close button. When this property is defined, the close button will visible.

Alert has close

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


export default function () {
    return (
        <Alert
            onClose={() => alert('Close button pressed')}
            title="Alert has close"
            message="Alert has close"
        />
    );
}

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

export default function () {
    return (
        <Alert
            onClose={() => alert('Close button pressed')}
            title="Alert has close"
            message="Alert has close"
        />
    );
}

Align

Determines how the content inside the Alert component is vertically aligned.

baseline: Default alignment.

center: Content is vertically centered within the Alert component. It may be useful if actions take up more space than text, or if the icon must be in the middle of the content.

Baseline

Baseline align

Center

Center align

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


export default function () {
    return (
        <>
            <Alert
                align="baseline"
                theme="info"
                title="Baseline"
                message="Baseline align"
                actions={<Alert.Action>button</Alert.Action>}
            />
            <Alert
                align="center"
                theme="info"
                title="Center"
                message="Center align"
                actions={<Alert.Action>button</Alert.Action>}
            />
        </>
    );
}

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

export default function () {
    return (
        <>
            <Alert
                align="baseline"
                theme="info"
                title="Baseline"
                message="Baseline align"
                actions={<Alert.Action>button</Alert.Action>}
            />
            <Alert
                align="center"
                theme="info"
                title="Center"
                message="Center align"
                actions={<Alert.Action>button</Alert.Action>}
            />
        </>
    );
}

Properties

Name	Description	Type	Default
theme	Alert appearance	`"normal"` `"info"` `"success"` `"warning"` `"danger"` `"utility"` `"clear"`	`"normal"`
size	Alert size	`"s"` `"m"` `"l"`	`"m"`
view	Enable/disable background color of the alert	`"filled"` `"outlined"`	`"filled"`
layout	Used to direct users to content if there is property `actions` with buttons	`"vertical"` `"horizontal"`	`"vertical"`
actionsLayout	Used to control the direction of the action buttons.	`"vertical"` `"horizontal"`	`"vertical"`
corners	Used for round/square corners of the alert window	`"rounded"` `"square"`	`"rounded"`
title	Title of the alert	`string`
message	Message of the alert	`React.ReactNode`
onClose	A callback function called when the user clicks the alert's close button	`Function`
actions	Array of buttons or full custom components	`React.ReactNode` `"AlertAction"`
align	Determines how content inside the Alert component is vertically aligned	`"center"` `"baseline"`	`"baseline"`
style	HTML style attribute	`React.CSSProperties`
className	Name of alert class	`string`
icon	Override default icon	`React.ReactNode`
qa	HTML `data-qa` attribute, used in tests.	`string`

CSS API

Name	Description
`--g-alert-padding`	Side paddings.
`--g-alert-border-radius`	Border radius.
`--g-alert-icon-margin-inline-end`	The indentation between icon and content part (text content + actions)
`--g-alert-close-btn-margin`	The indentation between content part (text content + actions) and close button
`--g-alert-actions-margin`	Gap between text content and actions.
`--g-alert-message-title-indent`	Gap between title and message.
`--g-alert-actions-gap`	Gap between action buttons.
`--g-alert-title-text-color`	Title color.
`--g-alert-title-font-size`	Title font size.
`--g-alert-title-line-height`	Title line height.
`--g-alert-message-text-color`	Message color.
`--g-alert-message-font-size`	Message font size.
`--g-alert-message-font-weight`	Message font weight.
`--g-alert-message-line-height`	Message line height.

Alert

§Theme

§View

§Layout

§Corners

§Alert title

§Alert message

§onClose

§Align

§Properties

§CSS API