@styloviz/alert-banner

Dismissible alert banners in 5 semantic variants and multiple display styles.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/alert-banner

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvAlertBannerComponent } from '@styloviz/alert-banner';

@Component({
  standalone: true,
  imports: [SvAlertBannerComponent],
  template: `
    <sv-alert-banner variant="warning" title="Heads up" message="Your trial ends in 3 days." [dismissible]="true" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | title | string | '' | Bold heading line. Leave empty to render body-only. | | message | string | '' | Main alert message text. | | variant | AlertVariant | 'info' | Semantic color. | | alertStyle | AlertStyle | 'soft' | Visual treatment. | | size | AlertSize | 'md' | Size controls padding and text scale. | | position | AlertPosition | 'inline' | Positioning mode. - inline — block element in document flow (default) - top-fixed — fixed to viewport top, full width - bottom-fixed — fixed to viewport bottom, full width - top-sticky — sticky inside its scroll container | | showIcon | boolean | true | Show the leading icon. | | iconPath | string | '' | Custom SVG <path d="..."> to override the default variant icon. Leave empty to use the built-in icon for the current variant. | | iconViewBox | string | '0 0 24 24' | Custom icon SVG viewBox. | | actions | AlertAction[] | [] | Up to 2 action buttons rendered inline. Each button emits its id via actionClick. | | dismissible | boolean | true | Show the × close button. | | autoDismissMs | number | 0 | Auto-dismiss after N milliseconds. Set to 0 to disable auto-dismiss. | | customClass | string | '' | Additional CSS classes merged on the root element. |

Outputs

| Output | Type | Description | | --- | --- | --- | | dismissed | void | Emitted after the alert finishes its close animation. | | actionClick | string | Emitted when an action button is clicked, carrying the action id. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/alert-banner

License

MIT