Toast

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

toast message

code

<script type="module">
  import '@blueprintui/components/include/toast.js';
</script>

<bp-toast anchor="example-anchor">toast message</bp-toast>
<div id="example-anchor" style="height: 100px; width: 300px; margin: 48px auto"></div>

Status

toast

info

success

warning

danger

code

<script type="module">
  import '@blueprintui/components/include/toast.js';
</script>

<bp-toast anchor="status-anchor" position="center" closable>toast</bp-toast>
<bp-toast anchor="status-anchor" position="top" status="accent" closable>info</bp-toast>
<bp-toast anchor="status-anchor" position="right" status="success" closable>success</bp-toast>
<bp-toast anchor="status-anchor" position="bottom" status="warning" closable>warning</bp-toast>
<bp-toast anchor="status-anchor" position="left" status="danger" closable>danger</bp-toast>
<div id="status-anchor" style="height: 100px; width: 300px; margin: 48px auto 100px auto"></div>

Install

NPM

// npm package
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

Properties

Name	Types	Description
`closable`	`boolean`
`position`	`Position`
`anchor`	`HTMLElement \| string`
`trigger`	`HTMLElement \| string`
`i18n`
`status`	`'accent' \| 'success' \| 'warning' \| 'danger'`
`hidden`	`boolean`

Attributes

Name	Types	Description
`closable`	`boolean`
`position`	`Position`
`anchor`	`HTMLElement \| string`
`trigger`	`HTMLElement \| string`
`i18n`
`status`	`'accent' \| 'success' \| 'warning' \| 'danger'`
`hidden`	`boolean`

CSS Properties

Name	Types	Description
`--padding`
`--filter`
`--background`
`--color`
`--width`
`--height`
`--min-width`
`--min-height`
`--font-size`

Slots

Name	Types	Description
`default`		content