menu
0.11.5
Toast
Component to visually notify a user of a message.
Module
import '@capitec/omni-components/toast';
content_copy 
import { OmniToast } from "@capitec/omni-components-react/toast";
content_copy
Source
Packages
Interactive
Showing Toasts
Configure Toast
Replacing Toasts
Custom Slotted Content
Custom Slotted Prefix
Closeable
Custom Slotted Close
Type
Interactive Showing Toasts Configure Toast Replacing Toasts Custom Slotted Content Custom Slotted Prefix Closeable Custom Slotted Close Type

Properties

Name Attribute Type Description
type type  
'success' | 'warning' | 'error' | 'info' | 'none'
 The type of toast to display.
header header  
string | undefined
 The toast title.
detail detail  
string | undefined
 The toast detail.
closeable closeable  
boolean | undefined
 If true, will display a close button that fires a close-click event when clicked.
current  
Global singleton ToastStack used for showing a toast, either by adding to, or replacing.
Use Toast.show function to add or replace toasts to this instance.
dir dir  
string
 Used to set the base direction of text for display
lang lang  
string
 Used to identify the language of text content on the web

Static Functions

Name Parameters Returns Description
configure 
options - {
        /**
         * The position to stack toasts
         */
        position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

        /**
         * Reverse the order of toast with newest toasts showed on top of the stack. By default newest toasts are showed at the bottom of the stack.
         */
        reverse?: boolean;

        /**
         * When true, will append toast to the toast stack. Otherwise when false will replace any toast(s). Defaults to true.
         */
        stack?: boolean;

        /**
         * If true, will display a close button that fires a `close-click` event when clicked and removes the toast from the stack.
         */
        closeable?: boolean;

        /**
         * If provided will be the time in millisecond the toast is displayed before being automatically removed from the stack.
         * Defaults to 3000ms when not provided.
         * When set to 0 it will never be auto removed.
         */
        duration?: number;
    }
 
ToastStack & { stack?: boolean | undefined; closeable?: boolean | undefined; duration?: number | undefined; }
 Configure the global singleton ToastStack used for showing a toast, either by adding to, or replacing.
Use Toast.show function to add or replace toasts to this instance.
show 
options - ShowToastInit
 
Toast
 Show a toast message.

Events

Name Type Description
close-click 
CustomEvent
 Dispatched when the close button is clicked when closeable.

Slots

Name Description 
loading_indicator
 Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called 
prefix
 Content to render before toast message area. 
[Default Slot]
 Content to render inside the component message area. 
close
 Content to render as the close button when closeable.

Theme Variables

Name Description 
--omni-theme-primary-color
 Theme primary color. 
--omni-theme-primary-hover-color
 Theme primary hover color. 
--omni-theme-primary-active-color
 Theme primary active color. 
--omni-theme-accent-color
 Theme accent color. 
--omni-theme-accent-hover-color
 Theme accent hover color. 
--omni-theme-accent-active-color
 Theme accent active color. 
--omni-theme-background-color
 Theme background color. 
--omni-theme-background-hover-color
 Theme background hover color. 
--omni-theme-background-active-color
 Theme background active color. 
--omni-theme-font-color
 Theme font color. 
--omni-theme-disabled-border-color
 Theme disabled border color. 
--omni-theme-disabled-background-color
 Theme disabled background color. 
--omni-theme-error-font-color
 Theme disabled background color. 
--omni-theme-error-border-color
 Theme error border color. 
--omni-theme-hint-font-color
 Theme hint font color. 
--omni-theme-inactive-color
 Theme inactive color. 
--omni-theme-box-shadow-color
 Theme inactive color. 
--omni-theme-font-family
 Theme font family. 
--omni-theme-font-size
 Theme font size. 
--omni-theme-font-weight
 Theme font weight. 
--omni-theme-border-radius
 Theme border radius. 
--omni-theme-border-width
 Theme border width. 
--omni-theme-box-shadow
 Theme box shadow.

Component Variables

Name Description 
--omni-toast-min-width
 Min Width. 
--omni-toast-max-width
 Max Width. 
--omni-toast-width
 Width. 
--omni-toast-z-index
 The z-index. 
--omni-toast-border-width
 Border width. 
--omni-toast-border-radius
 Border radius. 
--omni-toast-box-shadow
 Box shadow. 
--omni-toast-padding
 Container padding. 
--omni-toast-horizontal-gap
 Horizontal spacing between icon from type and content. 
--omni-toast-icon-size
 Symmetrical size of icon from type. 
--omni-toast-header-font-family
 Font family for header. 
--omni-toast-header-font-size
 Font size for header. 
--omni-toast-header-font-weight
 Font weight for header. 
--omni-toast-header-line-height
 Line height for header. 
--omni-toast-detail-font-family
 Font family for detail. 
--omni-toast-detail-font-size
 Font size for detail. 
--omni-toast-detail-font-weight
 Font weight for detail. 
--omni-toast-detail-line-height
 Line height for detail. 
--omni-toast-vertical-gap
 Vertical space between detail and header. 
--omni-toast-background
 The default background applied when no type is set. 
--omni-toast-default-font-color
 The default font color applied when no type is set. 
--omni-toast-border-color
 Border color. • 
--omni-toast-success-background
 The background applied when type is set to success. 
--omni-toast-success-font-color
 The font color applied when type is set to success. 
--omni-toast-success-border-color
 The border color applied when type is set to success. 
--omni-toast-success-icon-color
 The icon color applied when type is set to success. 
--omni-toast-warning-background
 The background applied when type is set to warning. 
--omni-toast-warning-font-color
 The font color applied when type is set to warning. 
--omni-toast-warning-border-color
 The border color applied when type is set to warning. 
--omni-toast-warning-icon-color
 The icon color applied when type is set to warning. 
--omni-toast-error-background
 The background applied when type is set to error. 
--omni-toast-error-font-color
 The font color applied when type is set to error. 
--omni-toast-error-border-color
 The border color applied when type is set to error. 
--omni-toast-error-icon-color
 The icon color applied when type is set to error. 
--omni-toast-info-background
 The background applied when type is set to info. 
--omni-toast-info-font-color
 The font color applied when type is set to info. 
--omni-toast-info-border-color
 The border color applied when type is set to info. 
--omni-toast-info-icon-color
 The icon color applied when type is set to info. 
--omni-toast-close-padding
 Padding applied to close button when closeable. 
--omni-toast-close-size
 Symmetrical size applied to close button when closeable.