Toasts
Status messages that appear for a short amount of time often along the bottom edge of the screen.
Default toasts
Toasts are created by calling the toast method on the UW global object. The
method accepts the following options:
| Option | Required? | Type | Description |
|---|---|---|---|
message |
Yes | string |
Text to display in toast. Should be less than 50 characters. |
duration |
No | number |
Number of milliseconds before toast disappears. Defaults to 5000. |
state |
No | string |
Changes toast color. See the toast state examples. |
<button id="toast-1" class="uw-button--filled">Show toast</button>
<script>
document
.querySelector('#toast-1')
.addEventListener('click', function () {
UW.toast({
message: `A short toast message`
});
}, false);
</script>Toast states
Toasts support the following states:
| State | Example |
|---|---|
'info' |
|
'success' |
|
'warning' |
|
'danger' |