lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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 toasttoast message
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

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

Events

NameTypesDescription
opendispatched when the toast is opened
closedispatched when the toast is closed

Properties

NameTypesDescription
closablebooleandetermine user closable state
openboolean
staticboolean
positionPosition
triggerHTMLElement | string
anchorHTMLElement | string
i18nset default aria/i18n strings
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state

Attributes

NameTypesDescription
closablebooleandetermine user closable state
openboolean
staticboolean
positionPosition
triggerHTMLElement | string
anchorHTMLElement | string
i18nset default aria/i18n strings
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state

CSS Properties

NameTypesDescription
--padding
--filter
--background
--color
--width
--height
--min-width
--min-height
--font-size

Slots

NameTypesDescription
defaultcontent