# r-toast
A temporary notification message with configurable status, optional auto-dismiss timer, headline, inline action, and dismiss button.
Example
```
Your profile has been updated successfully.
```
## class: `RToast`, `r-toast`
### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| -------------------- | ------- | --------------------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `action` | | `string` | | Specifies the text content for the call-to-action link. | |
| `announced` | | `boolean` | `true` | Sets role="alert" and will be announced to screen reader users | |
| `delay` | | `number` | | Specifies the time in miliseconds before the alert automatically dismissed.
If `delay` is NOT defined component will NOT be dismissed automatically. | |
| `delayBeforeRemoval` | | `number` | `300` | | |
| `dismissLabel` | | `string` | `'Dismiss the toast'` | Provides content for `aria-label` attribute of the dismiss button. | |
| `dismissMode` | | `"auto" \| "manual"` | `'manual'` | Defines the render of the component's dismissing trigger.
\- `auto`: trigger will NOT be rendered.
\- `manual`: trigger will be rendered. | |
| `headline` | | `string` | | Specifies the headline text for the alert, summarizing its message or purpose. | |
| `href` | | `string` | | Specifies the URL for the call-to-action link. | |
| `leadingIcon` | | `string` | | Specifies an optional icon for the leading slot of the dialog. | |
| `leadingIconVisible` | | `boolean` | `true` | Defines whether the leading icon is visible. | |
| `open` | | `boolean` | `true` | Controls if toast is initially shown. | |
| `status` | | `"error" \| "info" \| "success" \| "warning"` | `'info'` | Defines the appearance of the dialog based on the message type.
Options are: "info", "success", "warning", or "error". | |
| `target` | | `"_blank" \| "_parent" \| "_self" \| "_top"` | `'_self'` | Specifies the target for the linked URL when `href` is provided.
Options are: "_blank", "_self", "_parent", or "_top". | |
| `trailingIcon` | | `string` | `'cross'` | Specifies an optional icon for the trailing slot of the dialog. | |
### Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
| ------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | --------------- | -------------- |
| `dismiss` | | Dismisses the toast notification by setting it to a hidden state and then
removing it from the DOM after a short delay. This can be used to manually
hide the toast before the auto-dismiss timer expires. | | `Promise` | |
| `hide` | | Hides toast, keeps it in dom. | | `Promise` | |
| `measureAndPrepareHeight` | | Measures the natural height of toast and prepares it for reveal animation.
This should be called on newly added toasts before they are revealed. | | `Promise` | |
| `reveal` | | Reveals the toast notification by setting it to a visible state.
If the auto-dismiss delay is enabled, it will start the timer to
automatically dismiss the toast after the specified duration. | | `Promise` | |
| `toggle` | | Toggles visibility of the toast. | | `Promise` | |
### Events
| Name | Type | Description | Inherited From |
| ------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
| `dismiss` | `CustomEvent` | Emitted when the toast is dismissed and scheduled for removal from the DOM.
Fired by dismiss(), by the auto-dismiss timer (delay), and by the trailing
dismiss button. Use this to react to permanent removal (contrast with
toastHide which only hides without removal). | |
| `dismissed` | `CustomEvent` | Emitted when the dismiss toast animation is complete
and the element has fully disappeared from the view.
Fired by dismiss(), by the auto-dismiss timer (delay), by changing open property, and by the trailing
dismiss button. | |
| `hide` | `CustomEvent` | Emitted when the toast transitions to a hidden state but remains in the DOM.
Fired by hide(), by toggle() when resulting state is hidden, and when the
'open' prop changes causing the toast to hide. Not emitted on dismiss()
(which removes the element) — use 'toastDismiss' for that case. | |
| `rClickToastTrailingIcon` | `CustomEvent` | Event shall be emmited on trailing icon click | |
| `reveal` | `CustomEvent` | Emitted when the toast transitions to an open (revealed) state and remains in the DOM.
Fired by reveal(), by toggle() when the resulting state is open, and when the
'open' prop changes causing the toast to show. Not emitted by dismiss()
(which removes the element) — use 'toastDismiss' for that case. | |
### Attributes
| Name | Field | Inherited From |
| ---------------------- | ------------------ | -------------- |
| `action` | action | |
| `announced` | announced | |
| `delay` | delay | |
| `delay-before-removal` | delayBeforeRemoval | |
| `dismiss-label` | dismissLabel | |
| `dismiss-mode` | dismissMode | |
| `headline` | headline | |
| `href` | href | |
| `leading-icon` | leadingIcon | |
| `leading-icon-visible` | leadingIconVisible | |
| `open` | open | |
| `status` | status | |
| `target` | target | |
| `trailing-icon` | trailingIcon | |
### Slots
| Name | Description |
| ---------- | ------------------------------------------------ |
| | Default slot for the toast body content |
| `action` | Inline action link or button |
| `dismiss` | Override for the dismiss button |
| `headline` | Custom headline text |
| `leading` | Custom leading icon or status indicator |
| `trailing` | Custom trailing element (e.g. additional action) |
## Exports
| Kind | Name | Declaration | Module | Package |
| --------------------------- | --------- | ----------- | ------ | ------- |
| `js` | `RToast` | RToast | | |
| `custom-element-definition` | `r-toast` | RToast | | |