Alert

<ts-alert> vv0.4.0

The ts-alert component.

Open in Storybook for interactive demos.

Preview

<ts-alert variant="info">Content</ts-alert>

Properties

Property	Attribute	Type	Default	Description
closable	closable	boolean	false	Whether the alert can be dismissed.
variant	variant	"danger" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning"	'info'	The alert’s semantic variant.

Events

Event	Detail	Bubbles	Composed	Description
tsClose	void	Yes	Yes	Emitted when the alert is closed.

Methods

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

Slots

Name	Description
*(default)*	Default slot for alert message content.
action	Action buttons or links displayed at the end.
icon	Custom icon to override the default variant icon.

CSS Parts

Use ::part() to style internal elements:

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

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

Usage

HTML

<ts-alert variant="info">Content</ts-alert>

React

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

<TsAlert variant="info">Content</TsAlert>