# Alert



```tsx
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 which needs attention.

`danger` - used for hazard information.

`utility` - used for utility information.





```tsx
<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"/>
```



### View

`filled` - used to adjust the background color of the alert (used by default).

`outlined` - used to adjust the border color of the alert.





```
<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 property `actions` with buttons. For showing buttons below text (
used
by default).

`horizontal` - used to direct users to content if there is property `actions` with buttons. For showing buttons to the right
of text.





```tsx
<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Button>button</Button>}/>
<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Button>button</Button>}/>
```



### Corners

`rounded` - used for round corners of alert window (used by default).

`square` - used for squared corners of alert window.





```tsx
<Alert title="Rounded" message="Rounded corners" corners="rounded"/>
<Alert title="Square" message="Square corners" corners="square"/>
```



## Alert title

`title` - the title of the alert. It has a lower priority than Alert.Title.





```tsx
<Alert title={<Alert.Title className={'some-class'} text="some text"></Alert.Title>} />
```



## Alert message

`message` - message of the alert. It should fully explain the content of the alert.

## Alert onClose

`onClose` - callback function called when a user clicks the alert's close button. When this property is defined, a close button is visible.





```tsx
<Alert
  onClose={() => alert('Close button pressed')}
  title="Alert has close"
  message="Alert has close"
/>
```



### Align

Determines how content inside the Alert component is vertically aligned.

`baseline` - align used by default.

`center` - content is vertically centered within the Alert component. Useful if actions take up
more space than text,
or if the icon must be in the middle of the card.





```tsx
<Alert align="vertical" title="Vertical" message="Vertical direction" actions={<Button>button</Button>}/>
<Alert align="horizontal" title="Horizontal" message="Horizontal direction" actions={<Button>button</Button>}/>
```



## Properties

| Name      | Description                                                                 |                                Type                                |   Default    |
| :-------- | :-------------------------------------------------------------------------- | :----------------------------------------------------------------: | :----------: |
| theme     | Alert appearance                                                            | `"normal"` `"info"` `"success"` `"warning"` `"danger"` `"utility"` |  `"normal"`  |
| 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"` |
| corners   | Used for round/square corners of the alert window                           |                       `"rounded"` `"square"`                       | `"rounded"`  |
| title     | Title of the alert                                                          |                              `string`                              |              |
| message   | Message of the alert                                                        |                              `string`                              |              |
| 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`                              |              |