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
code
<div bp-layout="block center" style="height: 250px">
<bp-button popovertarget="toast-example">open toast</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 |
|---|
closable | boolean | determine user closable state |
open | boolean | default popover to open on intialization |
static | boolean | |
position | Position | determine the position relative to the anchor |
trigger | HTMLElement | string | the triggering element that opens the popover |
anchor | HTMLElement | string | anchor element popover will positiion relative to |
i18n | | set default aria/i18n strings |
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
Attributes
| Name | Types | Description |
|---|
closable | boolean | determine user closable state |
open | boolean | default popover to open on intialization |
static | boolean | |
position | Position | determine the position relative to the anchor |
trigger | HTMLElement | string | the triggering element that opens the popover |
anchor | HTMLElement | string | anchor element popover will positiion relative to |
i18n | | set default aria/i18n strings |
status | 'accent' | 'success' | 'warning' | 'danger' | 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 |