Alert

Class: FxAlert · Tag: <fx-alert>

<fx-alert> is an inline banner for alarms and notices. Use variants for the look, optional icons, and optional dismiss. Stacked toasts use the same control via Toaster.

Installation

import '@salsafx/ui';

<fx-alert variant="danger" text="Gearbox oil temp high"></fx-alert>
<fx-alert variant="warning" text="Nacelle vibration warning"></fx-alert>
<fx-alert variant="success" text="Generator online"></fx-alert>
<fx-alert variant="info" text="Pitch calibration in progress"></fx-alert>

Usage

Variants

<fx-alert variant="primary" text="Primary"></fx-alert>
<fx-alert variant="danger" text="Danger"></fx-alert>

Wrapping

Long copy wraps inside the banner. The icon stays vertically centered on the whole text block.

<fx-alert
    variant="info"
    text="Pitch calibration in progress. Check hydraulic pressure, yaw encoder offset, and generator temperature before continuing."
></fx-alert>

Icon

Omit the icon with has-icon="false". Override the default variant icon with icon.

<fx-alert variant="danger" has-icon="false" text="Without icon"></fx-alert>
<fx-alert variant="warning" icon="fa-solid fa-wind" text="Wind speed approaching cut-out"></fx-alert>

Dismiss

Set dismissible to show a close control. Listen for dismiss to remove or hide the alert.

<fx-alert id="notice" variant="warning" dismissible text="Sticky notice"></fx-alert>
<script>
    document.getElementById('notice').addEventListener('dismiss', (event) => {
        event.target.remove();
    });
</script>

API Reference

Properties & Attributes

Property	Attribute	Type	Default	Description
`variant`	`variant`	`String`	`"info"`	Semantic look. See Variants.
`icon`	`icon`	`String`	`""`	Icon-font class list. Empty uses the variant default.
`hasIcon`	`has-icon`	`Boolean`	`true`	Shows the leading icon. Use `has-icon="false"` to hide it.
`hasShadow`	`has-shadow`	`Boolean`	`false`	Drop shadow. Off by default on standalone alerts; toasts turn it on.
`text`	`text`	`String`	`""`	Banner copy. Line breaks in the string are kept.
`size`	`size`	`String`	`"large"`	`"small"`, `"medium"`, or `"large"`.
`dismissible`	`dismissible`	`Boolean`	`false`	Shows a close control.

Slots

Name	Description
— (default)	Banner copy when `text` is not set.
`icon`	Custom leading icon markup.

Events

Name	Description
`dismiss`	Fired when the close control is used.

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxAlert
    FxElement <|-- FxAlert