<ts-banner> vv0.4.0
The ts-banner component.
Open in Storybook for interactive demos.
<ts-banner variant="info">Content</ts-banner>
| Property | Attribute | Type | Default | Description |
|---|
dismissible | dismissible | boolean | false | Whether the banner can be dismissed. |
icon | icon | string | undefined | — | Optional Lucide icon name. |
sticky | sticky | boolean | false | Whether the banner sticks to the top of the viewport. |
variant | variant | "danger" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | 'info' | The banner’s semantic variant. |
| Event | Detail | Bubbles | Composed | Description |
|---|
tsClose | void | Yes | Yes | Emitted when the banner is dismissed. |
| Method | Signature | Description |
|---|
close | close() => Promise<void> | Programmatically close the banner. |
show | show() => Promise<void> | Programmatically show the banner. |
| Name | Description |
|---|
*(default)* | Default slot for message content. |
action | CTA button. |
Use ::part() to style internal elements:
| Part | Description |
|---|
action | The action slot wrapper. |
base | The banner container. |
close | The close/dismiss button. |
icon | The icon wrapper. |
message | The message wrapper. |
ts-banner::part(action) {
<ts-banner variant="info">Content</ts-banner>
import { TsBanner } from '@tessera-ui/react';
<TsBanner variant="info">Content</TsBanner>