Alert

Status: Experimental

Alert presents persistent contextual feedback with visible meaning beyond color. It does not force role="alert", because server-rendered or already-present guidance should not be announced as a new interruption.

Preview

Review account details

Confirm the billing contact before sending the next invoice.

Review

Changes saved

Workspace access rules now apply to all new members.

Payment requires attention

The current card expires this month.

Usage

---
import { Alert } from '@freight-px/frasto';
---

<Alert title="Review account details" tone="info">
  Confirm the billing contact before sending the next invoice.
</Alert>

API

Prop	Type	Default	Purpose
tone	"neutral" | "info" | "positive" | "warning" | "danger"	"neutral"	semantic visual treatment
title	string	—	concise visible message heading
class	string	—	styles the root

Native div attributes pass through. The optional icon slot accepts a visual; decorative icons must be hidden from assistive technology. The default slot supplies message content. The optional action slot keeps one relevant action at the trailing edge and moves it below the message on narrow layouts.

Choose a live-region role only when the application inserts a time-sensitive message dynamically. Alert has no built-in dismissal or persistence state.