# auro-toast
The `auro-toast` element provides users a way to display short, temporary messages.
### Properties & Attributes
| Properties | Attributes | Modifiers | Type | Default | Description |
| --------------- | --------------- | --------- | -------------------------------- | ------- | ------------------------------------------------------------------- |
| disableAutoHide | disableAutoHide | | boolean | | Prevents the toast from auto-hiding on the default time. |
| noIcon | noIcon | | boolean | | Removes icon from the toast UI. |
| timeTilHide | timeTilHide | | number | | Sets the time in milliseconds until the toast hides. |
| variant | variant | | `error` \| `success` \| `custom` | | Component will render visually based on which variant value is set. |
| visible | visible | | boolean | | Sets state of toast to visible |
### Methods
| Name | Parameters | Return | Description |
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
### Events
| Name | Description |
| ------------ | --------------------------------------- |
| onToastClose | Notifies that the toast has been closed |
### CSS Shadow Parts
| Name | Description |
| ------------ | ----------------------------------- |
| close-button | Apply css to the toast close button |
| type-icon | Apply css to the toast type icon |
## Basic
Show default notification
Default notification with no error type
See code
```html
Show default notification
Default notification with no error type
```
## Property & Attribute Examples
### Disable Auto Hide
Use the `disableAutoHide` attribute to prevent the toast from automatically dismissing itself.
Show default notification
Default notification with no error type
See code
```html
Show default notification
Default notification with no error type
```
### No Icon
Using the `noIcon` attribute will set no icon to be visible in the notification.
Show toast with no icon Default toast
See code
```html
Show toast with no icon Default toast
```
### Time Until Hide
Using the `timeTilHide` attribute will set a timer in milliseconds for how long the notification will be visible before it automatically hides. The default is `5000` milliseconds.
Show default notification
Default notification with no error type
See code
```html
Show default notification
Default notification with no error type
```
### Variant
What the component will render visually based on which variant value is set; currently supports `error`, `success`.
**Note:** The `error` variant does not automatically hide by default, like other variants.
Show default toast
Default toast
Show error toast
Unable to add lap infant. Please try again
Show success toast
Successfully added lap infant
See code
```html
Show default toast
Default toast
Show error toast
Unable to add lap infant. Please try again
Show success toast
Successfully added lap infant
```
#### Customizing Toast Notifications
The toast notification can be customized in several ways.
- By applying the `variant="custom"` attribute value, you may pass in custom svg to use in place of the defaults assigned to the other variants.
- You may recolor the toast notification using the tier 3 theme tokens.
- You may disable the auto hide behavior of the toast by applying the `disableAutoHide` attribute.
- You may programmatically show the toast by applying the `visible` attribute. (e.g. if you want the toast to show on load)
Show customized notification
Did you know you can create a price alert for this route?
Create Alert
See code
```html
Show customized notification
Did you know you can create a price alert for this route?
Create Alert
```
### Visible
State of the push notification which determines if it is `visible`.
Set visible to true
Default toast
See code
```html
Set visible to true
Default toast
```
## Common Usage Patterns & Functional Examples
### Multiple Toasts
The multi-notification use case requires the use of the `` component. Toaster will render the toasts at the bottom right of a page.
Show default toastShow error toastShow success toastDefault toastUnable to add lap infant. Please try againSuccessfully added lap infant
See code
```html
Show default toastShow error toastShow success toastDefault toastUnable to add lap infant. Please try againSuccessfully added lap infant
```
## Restyle Component with CSS Variables
The component may be restyled by changing the values of the following token(s).
```scss
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
:host {
--ds-auro-toast-close-button-hover-container-color: var(--ds-advanced-color-button-tertiary-background-hover, #{v.$ds-advanced-color-button-tertiary-background-hover});
--ds-auro-toast-container-color: var(--ds-advanced-color-shared-background-strong, #{v.$ds-advanced-color-shared-background-strong});
--ds-auro-toast-icon-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
--ds-auro-toast-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
}
```