Alert
A message that stays on the page: a status, a warning, a banner across the top of a view. The kit adds a neutral type and a three-level emphasis.
Anotomy
Structure of the alert and how its internal parts are composed. These are the alert's semantic parts, so they are also what the
classNames and styles objects accept.
| Name | Description | |
|---|---|---|
1 | root | The alert's outer box: border, background, padding, radius and the row that lines up every other part. type and emphasis color it here. |
2 | icon | The status icon, shown when showIcon is set. It grows when the alert has a description, and icon replaces the glyph. |
3 | section | The column that holds the title and the description. It takes the free width, so the actions and the close button stay on the trailing edge. |
4 | title | The message, from title. On its own it gives the compact alert, with the other parts centered against it. |
5 | description | The second line, from description. Passing it switches to the taller layout, where the parts align to the top. |
6 | actions | The trailing slot that holds what you pass to action. It renders only when action is set. |
7 | close | The close button, rendered when closable is set. closable.closeIcon replaces its icon. |
© 2026 AntUIKit . All rights reserved.