@gravity-ui/uikit
Version:
Gravity UI base styling and components
143 lines (102 loc) • 8.46 kB
Markdown
# 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. |