Toast

Toast is a minimalist feedback component. It typically appears at the bottom or middle of the screen to provide immediate, non-interactive feedback such as "Copied" or "Refreshed".

Unlike the stacking display of the Message component, Toast utilizes a Serial Queue scheduling mechanism. This means only one Toast is displayed on the screen at a time; any subsequently triggered Toasts enter a queue and are displayed automatically after the current one disappears.

Basic Usage

You can create a Toast using the $tToast method.

import { inject } from 'vue';

const { $tToast } = inject('$global');

// 1. Basic text (disappears after default 3 seconds)
$tToast({ content: "Copied to clipboard" });

// 2. Specify type
$tToast({ 
  content: "Network connection restored", 
  type: "success",
  icon: "ti-wifi"
});

Core Features

Queuing Mechanism (Queue)

This is the most distinctive feature of Toast. When $tToast is called multiple times in rapid succession, the messages do not flood the screen like Messages; instead, they appear one by one like a playlist.

This mechanism is ideal for mobile devices or scenarios where maintaining a clean interface is a priority.

// If a user clicks a button 3 times quickly:
$tToast({ content: "Saving step 1..." }); // Displays immediately
$tToast({ content: "Saving step 2..." }); // Displays after 1 disappears
$tToast({ content: "Save complete" });      // Displays after 2 disappears

Visual Tone (Tone)

Toast supports five levels of visual tones to adjust according to the visual focus of the interface:

• weak: Elegant style.
• base (default): Standard style.
• strong: Strong tone with high color saturation.
• strongInvert: Strong inverted color.
• extremeInvert: Extremely inverted color with high contrast.

$tToast({ 
  content: "Critical operation reminder", 
  type: "warning", 
  tone: "strong" // Use a strong tone background
});

Advanced Style Customization (Typed)

The Toast component integrates the TuiTyped style engine. You can pass low-level style configurations through the typedConfig parameter.

$tToast({
  content: "Loading...",
  // Configuration passed to TuiTyped
  typedConfig: {
    appearance: 'outline', // Outline style
    round: true            // Full rounded corners
  }
});

Global Methods

$tToast(options)

Adds a Toast to the display queue.

$tToastClose()

Immediately closes the currently displayed Toast and triggers the next one in the queue, if applicable.

API Reference

Property	Type	Default	Description
content	String	(Required)	The content of the prompt.
type	String	'info'	Theme color type: primary, success, warning, error, info, emphasis, etc.
tone	String	'base'	Visual tone. Options: 'weak', 'base', 'strong', 'strongInvert', 'extremeInvert'.
duration	Number	3000	Display duration in milliseconds.
onClose	Function	-	Callback function triggered upon closing.
icon	String	-	Custom icon class name.
hideIcon	Boolean	false	Whether to hide the icon.
position	String	'bottom-center'	(Controlled by global configuration) Popup position.
transparent	Boolean	true	Whether to enable a semi-transparent background.
backgroundBlur	Boolean	true	Whether to enable background blur.
hasShadow	Boolean	true	Whether to show a shadow.
typedConfig	Object	-	Advanced style configuration object passed to the internal TuiTyped component.
className	String	-	Custom CSS class name.
appendTo	String/Object	-	Specifies the mounting container.

Global Configuration

The global configuration object $aToast (or $attentionConfig.toast) is reactive. You can dynamically modify the default behavior of Toast at runtime.

import { inject } from 'vue';

const { $aToast } = inject('$global');

const updateToastSettings = () => {
  // Dynamically modify default duration and position offsets
  $aToast.value.duration = 5000;
  $aToast.value.offsetX = 0;
  $aToast.value.offsetY = 100; // 100px from the bottom
};

Global ESC Monitoring

To provide an efficient and intuitive interaction experience, this component is deeply integrated with global escCounter monitoring. When a user presses the Esc key, all currently displayed notification instances are automatically destroyed. This allows users to quickly clear temporary information from the screen via the keyboard without clicking each close button manually.