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
Shows temporary notification messages that auto-dismiss.
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
Shows toast with various status colors.
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 | Determines whether a close button is displayed for dismissing the toast |
open | boolean | Controls whether the toast is visible on initialization |
static | boolean | Determines whether the toast remains in a fixed position without repositioning |
position | Position | Specifies the position of the toast relative to its anchor or viewport |
anchor | HTMLElement | string | Defines the anchor element or selector that the toast will position relative to |
i18n | | Provides internationalization strings for translated text content |
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type affecting color, icon, and semantic meaning |
Attributes
| Name | Types | Description |
|---|
closable | boolean | Determines whether a close button is displayed for dismissing the toast |
open | boolean | Controls whether the toast is visible on initialization |
static | boolean | Determines whether the toast remains in a fixed position without repositioning |
position | Position | Specifies the position of the toast relative to its anchor or viewport |
anchor | HTMLElement | string | Defines the anchor element or selector that the toast will position relative to |
i18n | | Provides internationalization strings for translated text content |
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type affecting color, icon, and semantic meaning |
CSS Properties
| Name | Types | Description |
|---|
--padding | | |
--filter | | |
--background | | |
--color | | |
--width | | |
--height | | |
--min-width | | |
--min-height | | |
--font-size | | |
Slots
| Name | Types | Description |
|---|
default | | content |