Variants

API: Variant · Attribute: variant

Variants are named looks for status and action chrome: primary, secondary, success, danger, warning, info, light, and dark. In HTML use the string attribute. In JavaScript either the string or the Variant enum is fine.

They apply to Alert, Toaster, Push Button, LED Indicator, and Semaphore lamps.

---

Names

Attribute	Typical use
primary	Default emphasis
secondary	Neutral / muted action
success	Healthy / complete
danger	Fault / stop
warning	Caution
info	Status / notice
light	High-contrast light chrome
dark	Low-key chrome

On alerts and toasts, each name also picks a matching default icon. Override with icon when you need a different glyph.

---

Alert

<fx-alert variant="danger" text="Gearbox oil temp high"></fx-alert>

alert.variant = 'danger';
alert.variant = Variant.Danger;

---

Push button

Set variant for the face color. background-color and foreground-color override it when set.

<fx-push-button label="Danger" variant="danger" label-position="inside" shape="pill"></fx-push-button>

---

LED indicator

Set variant for the lamp color. color overrides it when set.

<fx-led-indicator label="Danger" variant="danger" is-active></fx-led-indicator>

---

Semaphore

Default stop / warn / go lamps use danger / warning / success. Set variant on <fx-semaphore-state> for other names; color overrides it.

<fx-semaphore value="go" label="RUN">
    <fx-semaphore-state value="stop" variant="danger" label="STOP"></fx-semaphore-state>
    <fx-semaphore-state value="warn" variant="warning" label="WARN"></fx-semaphore-state>
    <fx-semaphore-state value="go" variant="success" label="GO"></fx-semaphore-state>
</fx-semaphore>

---

Toaster

Helpers such as FxToaster.danger() set the variant. Same names as the table above.

FxToaster.danger('Trip');
FxToaster.warning('Caution');

---

Color overrides

An explicit color on the control wins over variant.

Control	Override
Alert / toast	Use variant for the whole look (no per-swatch override).
Push button	background-color, foreground-color
LED	color
Semaphore lamp	color on <fx-semaphore-state>

<fx-led-indicator variant="danger" color="#fb7185" label="Trip" is-active></fx-led-indicator>

Tip

Leave the color attributes empty (or omit them) when you want the variant palette.

---

TypeScript

import { Variant, FxToaster } from '@salsafx/ui';

FxToaster.danger('Trip');
FxToaster.warning('Caution');

Member	Description
Variant.Primary … Variant.Dark	Enum members
Variant.toString(variant)	Attribute string ("danger"). Accepts enum or string.
Variant.parse("danger")	Enum from string
Variant.toIcon(variant)	Default Font Awesome class list. Accepts enum or string.
Variant.toColors(variant)	{ background, foreground, border }. Accepts enum or string.