📩Messages / Toast

The Toast component serves as a versatile tool for presenting concise notifications ("toasts") within an application. It offers a range of configurations to customize the appearance, behavior, and placement of these toasts. Below is the documentation detailing the Toast component and its associated methods.

Parameters

• title (string): The toast notification's visibility hinges on the inclusion of a title parameter, which is prominently displayed.

• options (Object): You can optionally utilize a configuration object to customize the toast notification. This object includes properties such as:

  • message (string): This is optional. It's the message displayed on the toast

  • duration (number): This is optional. It determines how long the toast should stay on the screen, specified in seconds. The default duration is 3 seconds.

  • id (string): This is optional. It serves as a unique identifier for the toast, useful for targeting specific notifications if necessary.

  • placement (string): You have the option to set the toast's position on the screen with this parameter. It accepts values like "top", "topLeft", "topRight", "bottom", and "bottomRight". The default position is "bottomRight".

  • dismissible (boolean): This is optional. It defines whether the user can dismiss the toast before the duration expires. By default, this value is true, allowing the toast to be dismissed.

Return value

The toast.open method doesn't return anything.

Basic usage

To display a basic toast with only a title:

toast.open('This is the title');

Message and duration

To show a toast with a title, message, and custom duration:

toast.success("Successfully loaded", {duration: 5});

Custom placement and dismissibility

To display a toast at the top of the screen without the option for dismissal:

toast.warn('Alert!', { message: 'This action will delete the value.', placement: 'bottom', dismissible: false });

Customization

The Toast component introduces custom methods designed to deliver notifications with predefined styles and icons tailored to distinct categories: success, info, warn, and error.

• By default, the toast will close once the specified duration has passed, unless the dismissible parameter is set to false. In such instances, users are required to manually close the toast.

• When multiple toasts are triggered with the same id, they will be regarded as distinct instances unless custom logic is implemented to address such scenarios.

• The positioning of the toast may require adjustment depending on the overall layout and responsiveness of the application, ensuring optimal visibility across various devices.

Each of the following methods shares identical parameters with toast.open, allowing for the customization of the message, duration, ID, placement, and dismissibility: toast.info,toast.success, toast.warn and toast.error.