Skip to main content

Alert

Stable

Persistent in-page notification banner. Alert stays visible until dismissed — unlike Toast which auto-dismisses. The danger variant uses role='alert' for immediate screen reader announcement.

FeedbackPersistentVhyxSeal

Interactive example

Beta featureThis feature is currently in beta. Please report any issues you encounter.
Dismissible alert — click × to dismiss

Import

tsx
import { Alert } from '@vhyxui/react'

Variants

Five semantic variants. danger uses role='alert' (assertive). All others use role='status' (polite).

A default informational alert.
Changes savedYour profile has been updated successfully.
Storage lowYou are using 90% of your storage quota.
New version availablev1.2.0 is now available with performance improvements.
All 5 variants

States

Warning — this can be dismissed.
DoneTask completed. You can dismiss this.
Dismissible
Deployment in progress. ETA: 2 minutes.
Custom icon

Props

PropTypeDefaultDescription
variant'default' | 'success' | 'warning' | 'danger' | 'info''default'Semantic variant controlling color and icon.
titlestring—Optional bold title rendered above the message.
iconReact.ReactNode—Icon override. Each variant has a default icon.
dismissiblebooleanfalseShows a dismiss (×) button.
onDismiss() => void—Called when the dismiss button is clicked.
contractPartial<ComponentContract>—VhyxSeal contract override.
classNamestring—Additional CSS classes.

Also accepts all standard HTMLDivElement attributes.

Accessibility

  • ✓ danger variant uses role="alert", aria-live="assertive" — announced immediately.
  • ✓ All other variants use role="status", aria-live="polite" — announced at next opportunity.
  • ✓ Fade-in on mount only — no exit animation (Alert persists until explicitly dismissed).
  • ✓ Dismiss button has aria-label="Dismiss".
  • ✓ Unlike Toast, Alert is persistent — suitable for important information that must not auto-dismiss.

Keyboard navigation

KeyAction
TabMove focus to the dismiss button (when dismissible=true).
EnterorSpaceActivate the dismiss button.

Agent contract

Default VhyxSeal contract shipped with every Alert.

Default contract
{
  "type": "display",
  "intent": "display-alert",
  "description": "Displays a persistent contextual alert message to the user",
  "requires": [],
  "requiredPermissions": [],
  "consequence": "None — display only. Persists until dismissed.",
  "affects": [],
  "reversible": false,
  "safetyLevel": "low",
  "requiresConfirmation": false,
  "destructive": false,
  "contractVersion": "0.0.1",
  "fingerprint": "vhyxs_0cc4bc1e"
}

Theming

Override these CSS tokens to theme Alert.

--vhyx-color-*-subtleVariant background colors
--vhyx-color-*Variant border/icon colors
--vhyx-color-*-textVariant text colors
--vhyx-radius-mdBorder radius
--vhyx-duration-normalFade-in animation duration
--vhyx-easing-decelerateEntry easing

Examples

Form validation summary

Danger alert with error list

Conditional alert after action

tsx
{saveError && (
  <Alert
    variant="danger"
    title="Save failed"
    dismissible
    onDismiss={() => setSaveError(null)}
  >
    {saveError.message}
  </Alert>
)}