# Alert

The `Alert` component displays a prominent message to draw the user's attention to important information.

```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 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`)

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

```
<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.

```tsx
<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.

```tsx
<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`.

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

## 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.

```tsx
<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.

```tsx
<Alert align="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>}/>
<Alert align="horizontal" title="Horizontal" message="Horizontal direction" 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.                                                           |