Toast

<ts-toast> vv0.4.0

The ts-toast component.

Open in Storybook for interactive demos.

Preview

<ts-toast duration="5000" position="top-right">Content</ts-toast>

Properties

Property	Attribute	Type	Default	Description
dismissible	dismissible	boolean	true	Whether the toast shows a close button.
duration	duration	number	5000	Auto-dismiss duration in ms. Set 0 to disable.
open	open	boolean	false	Whether the toast is visible.
position	position	"bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right"	'top-right'	Position of the toast on screen.
variant	variant	"danger" | "info" | "neutral" | "success" | "warning"	'info'	The toast’s visual variant.

Events

Event	Detail	Bubbles	Composed	Description
tsClose	void	Yes	Yes	Emitted when the toast is dismissed.

Methods

Method	Signature	Description
close	close() => Promise<void>	Programmatically close the toast.
show	show() => Promise<void>	Programmatically show the toast.

Slots

Name	Description
*(default)*	Default slot for message content.
action	Optional action button.

CSS Parts

Use ::part() to style internal elements:

Part	Description
action	The action slot wrapper.
base	The toast container.
close	The close button.
icon	The variant icon wrapper.
message	The message wrapper.

ts-toast::part(action) {
  /* your custom styles */
}

Usage

HTML

<ts-toast duration="5000" position="top-right">Content</ts-toast>

React

import { TsToast } from '@tessera-ui/react';

<TsToast dismissible duration="5000">Content</TsToast>