A Toast component is a notification that appears on the screen for a short period of time and provides feedback about an action performed by the user. A Toast should be used for short, non-interruptive notifications that are meant to supplement the current screen.
Example
open dropdowntoast message
code
<div bp-layout="block center" style="height: 250px">
<bp-button popovertarget="toast-example">open dropdown</bp-button>
<bp-toast popover closable id="toast-example">toast message</bp-toast>
</div>
<script type="module">
import '@blueprintui/components/include/toast.js';
</script>
Status
toastinfosuccesswarningdanger
code
<div bp-layout="block center gap:md">
<bp-toast static open position="center" closable>toast</bp-toast>
<bp-toast static open position="top" status="accent" closable>info</bp-toast>
<bp-toast static open position="right" status="success" closable>success</bp-toast>
<bp-toast static open position="bottom" status="warning" closable>warning</bp-toast>
<bp-toast static open position="left" status="danger" closable>danger</bp-toast>
</div>
<script type="module">
import '@blueprintui/components/include/toast.js';
</script>
Install
NPM
import '@blueprintui/components/include/toast.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/toast.js/+esm';
</script>
Accessibility
- The Toast component should have a clear and concise message.
- The Toast should be dismissed automatically after a short period of time, or the user can manually dismiss it.
- The Toast should be positioned in a visually distinguishable area on the screen.
bp-toast
Events
| Name | Types | Description |
|---|
open | | dispatched when the toast is opened |
close | | dispatched when the toast is closed |
Properties
| Name | Types | Description |
|---|
accessor | | determine the visual status state |
closable | boolean | |
open | boolean | |
static | boolean | |
position | Position | |
trigger | HTMLElement | string | |
i18n | | |
status | 'accent' | 'success' | 'warning' | 'danger' | |
Attributes
| Name | Types | Description |
|---|
accessor | | determine the visual status state |
CSS Properties
| Name | Types | Description |
|---|
--padding | | |
--filter | | |
--background | | |
--color | | |
--width | | |
--height | | |
--min-width | | |
--min-height | | |
--font-size | | |
Slots
| Name | Types | Description |
|---|
default | | content |