# Alert



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

### Theme

`normal` - the main theme (used by default).

`info` - the theme used for any kind of regular information.

`success` - the theme used for positive information.

`warning` - the theme used for information which needs attention.

`danger` - the theme used for hazard 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"/>
```



### 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 for direction of content if there is property `actions` with buttons. It shows buttons below text (
used
by default).

`horizontal` - used for direction of content if there is property `actions` with buttons. It shows buttons on the right
side 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 fot round corners of alert window (used by default)

`square` - used for square 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` - the message of the alert. It should completely explain the content of the alert.

## Alert onClose

`onClose` - a callback function that is called when the close button of the alert is clicked. When this property is
defined, a close button is being displayed.





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



### Align

This property determines how the content inside the Alert component is vertically aligned

`baseline` - align used by default.

`center` - the content is vertically centered within the Alert component, useful if for some reason your actions take
more space than text
or needed icon to 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"` `"dangerous"` |  `"normal"`  |
| view      | Enable/disable the background color of the alert                                 |                  `"filled"` `"outlined"`                  |  `"filled"`  |
| layout    | Used for direction of content if there is property `actions` with buttons        |                `"vertical"` `"horizontal"`                | `"vertical"` |
| corners   | Used fot round/square corners of alert window                                    |                  `"rounded"` `"square"`                   | `"rounded"`  |
| title     | The title of the alert                                                           |                         `string`                          |              |
| message   | The message of the alert                                                         |                         `string`                          |              |
| onClose   | A callback function that is called when the close button of the alert is clicked |                        `Function`                         |              |
| actions   | Array of buttons or full custom components                                       |             `React.ReactNode` `"AlertAction"`             |              |
| align     | Determines how the content inside the Alert component is vertically aligned      |                  `"center"` `"baseline"`                  | `"baseline"` |
| style     | HTML style attribute                                                             |                   `React.CSSProperties`                   |              |
| className | The alert class name                                                             |                         `string`                          |              |
| icon      | Override default icon.                                                           |                     `React.ReactNode`                     |              |