# r-alert
Displays an inline contextual message with a status icon, optional headline, body content, and dismiss action. Use to communicate feedback such as errors, warnings, success, or informational notices.
Example
```
This is an informational alert.
```
## class: `RAlert`, `r-alert`
### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| ------------------------ | ------- | -------------------------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `announced` | | `boolean` | `true` | Sets role="alert" and will be announced to screen reader users | |
| `content` | | `string` | | Defines content text of the alert | |
| `delay` | | `number` | | | |
| `delayBeforeRemoval` | | `number` | `500` | | |
| `delayMs` | | `number` | | | |
| `dismissButtonAriaLabel` | | `string` | `'Dismiss alert'` | Text content for an alert dismiss button | |
| `dismissMode` | | `"auto" \| "manual"` | `'manual'` | Defines the behavior of the component's dismissing.
\- `auto`: The component will be dismissed automatically after the time specified by `delayMs` (or deprecated `delay` in seconds).
\- `manual`: The component requires explicit user action to close. | |
| `headline` | | `string` | | Defines headline text of the alert | |
| `href` | | `string` | | Defines href of the alert link | |
| `leadingIcon` | | `string` | | Defines an icon to be presented in leading slot | |
| `leadingIconSize` | | `"l" \| "m" \| "s"` | `'m'` | Defines an icon size to be presented in leading slot | |
| `leadingIconSrc` | | `string` | | Defines an icon source to be presented in leading slot | |
| `leadingIconVisible` | | `boolean` | `true` | Defines whether the leading icon is visible. | |
| `linkText` | | `string` | | Defines link label text of the alert | |
| `open` | | `boolean` | `true` | Controls alert visibility | |
| `status` | | `"error" \| "info" \| "warning"` | `'info'` | Alert status controls apperance according to the status | |
| `target` | | `"_blank" \| "_parent" \| "_self" \| "_top"` | `'_self'` | Defines the target for the linked URL when `href` is provided.
Options: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | |
| `trailingIcon` | | `string` | `'cross'` | Defines an icon to be presented in trailing slot | |
| `trailingIconSize` | | `"l" \| "m" \| "s"` | `'m'` | Defines an icon size to be presented in trailing slot | |
| `trailingIconSrc` | | `string` | | Defines an icon source to be presented in trailing slot | |
### Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
| --------- | ------- | --------------------------------------------------------------------- | ---------- | --------------- | -------------- |
| `dismiss` | | Dismisses the alert and removes it from the DOM after the transition. | | `Promise` | |
| `hide` | | Method to hide the alert if it was visible, keeps it in DOM | | `Promise` | |
| `show` | | Method to show the alert if it was hidden | | `Promise` | |
| `toggle` | | Toggles visibility of the alert. | | `Promise` | |
### Events
| Name | Type | Description | Inherited From |
| ------------------------- | ------------------ | ------------------------------------------------- | -------------- |
| `rAlertDismiss` | `CustomEvent` | Emit when by click on the trailing dismiss button | |
| `rAlertDismissed` | `CustomEvent` | Emit when alert is removed from the DOM | |
| `rAlertHide` | `CustomEvent` | Emit when alert is hidden from the view | |
| `rAlertShow` | `CustomEvent` | Emit when alert becomes visible | |
| `rClickAlertTrailingIcon` | `CustomEvent` | | |
### Attributes
| Name | Field | Inherited From |
| --------------------------- | ---------------------- | -------------- |
| `announced` | announced | |
| `content` | content | |
| `delay` | delay | |
| `delay-before-removal` | delayBeforeRemoval | |
| `delay-ms` | delayMs | |
| `dismiss-button-aria-label` | dismissButtonAriaLabel | |
| `dismiss-mode` | dismissMode | |
| `headline` | headline | |
| `href` | href | |
| `leading-icon` | leadingIcon | |
| `leading-icon-size` | leadingIconSize | |
| `leading-icon-src` | leadingIconSrc | |
| `leading-icon-visible` | leadingIconVisible | |
| `link-text` | linkText | |
| `open` | open | |
| `status` | status | |
| `target` | target | |
| `trailing-icon` | trailingIcon | |
| `trailing-icon-size` | trailingIconSize | |
| `trailing-icon-src` | trailingIconSrc | |
### Slots
| Name | Description |
| ---------- | ------------------------------------------------------------- |
| | Default slot for content |
| `content` | Alert body content text |
| `headline` | Alert headline text |
| `leading` | Custom leading icon or visual element before the message body |
| `link` | Link element |
| `trailing` | Custom trailing action or icon (e.g. dismiss button override) |
## Exports
| Kind | Name | Declaration | Module | Package |
| --------------------------- | --------- | ----------- | ------ | ------- |
| `js` | `RAlert` | RAlert | | |
| `custom-element-definition` | `r-alert` | RAlert | | |