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>

Background

alert-theme="light" uses a pale fill and dark text. background-color still replaces the fill. The icon stays on the variant accent. App-wide default is Fx.configure({ alertTheme: 'light' }).

<fx-alert variant="danger" size="medium" alert-theme="light" text="Gearbox oil temp high"></fx-alert>
<fx-alert variant="info" size="medium" alert-theme="light" text="Pitch calibration in progress"></fx-alert>

Dismiss

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

<fx-alert
    id="docs-dismissible-alert"
    variant="warning"
    size="large"
    dismissible
    text="Sticky notice — dismiss with the close control"
></fx-alert>
<script>
    document.getElementById('docs-dismissible-alert').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. Strength is `--fx-alert-shadow-opacity`.
`backgroundColor`	`background-color`	`String`	`""`	Fill override. Empty uses the variant background (pastel mix in the `light` alert theme).
`alertTheme`	`alert-theme`	`String`	from `Fx.configure`	`"dark"` or `"light"`. Empty follows `alertTheme` from Setup. Light uses dark text on a pale fill.
`text`	`text`	`String`	`""`	Banner copy. Line breaks in the string are kept.
`size`	`size`	`String`	`"large"`	`"x-small"`, `"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.

CSS Custom Properties

Property	Default	Description
`--fx-alert-background`	variant fill	Banner fill. Set by `variant`, `background-color`, or a pastel mix in the `light` alert theme.
`--fx-alert-foreground`	variant text	Banner text color. Darker in the `light` alert theme.
`--fx-alert-border`	variant accent	Left rule and icon color.
`--fx-alert-shadow-opacity`	`0.5`	Opacity of the drop shadow (`0`–`1`). Visible when `has-shadow` is on.

Object Hierarchy

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