Alert Box

Inline notice surface for persistent warnings, errors, info, and success messaging.

Overview

AlertBox is the shared inline notice component used for persistent or context-bound messaging.

Use it when the message should remain visible in the layout instead of appearing as a transient toast.

Common fits:

<AlertBox status="warning">
  Select a purpose for this email domain.
</AlertBox>

Available statuses:

AlertBox renders a default info icon unless you provide Icon.

You can also suppress the default icon by passing an empty fragment or another custom node.

<AlertBox status="warning" Icon={<></>}>
  Multiple purposes selected.
</AlertBox>

This is a real pattern in DomainPanel.tsx.

Prop	Type	Default	Description
`status`	`'default' \| 'info' \| 'warning' \| 'error' \| 'success' \| 'dark'`	`'default'`	Visual status treatment.
`className`	`string`	—	Additional classes.
`children`	`ReactNode`	—	Required alert content.
`onClick`	`() => void \| Promise<void>`	—	Optional click handler for interactive alerts.
`Icon`	`ReactNode`	—	Optional icon override.

AlertBox renders a <p>, so keep the content phrasing-level unless you are intentionally controlling the layout.
Use AlertBox for persistent inline messaging, not transient notification feedback.
If the message should disappear after a short time or acknowledge a completed action, use a toast instead.

Pattern	Path	Notes
Workflow inline warning	`fsai/apps/brand-dashboard/src/pages/Workflows/components/config-panel/TriggerConfig.tsx`	Persistent inline warning inside a config panel.
Compliance blocking notice	`fsai/apps/brand-dashboard/src/pages/EmailBuilder/EmailBuilder.tsx`	Inline error that belongs to the current editing surface.
Domain setup guidance	`fsai/apps/brand-dashboard/src/components/DomainPanel/DomainPanel.tsx`	Uses status variants and icon suppression for richer inline guidance.
Compact field guidance	`fsai/apps/brand-dashboard/src/components/InviteToOrganisationModal/InviteToOrganisationModal.tsx`	Inline explanatory notes inside a modal form.

Use AlertBox when the message should stay attached to the current screen, form, panel, or section.

Do not use it for:

Those should usually use showToast.

Do use AlertBox for persistent inline feedback and prerequisites
Do choose the status based on the message severity and meaning
Do use custom Icon only when the default info icon is not the right affordance
Don't use AlertBox where a toast, modal, or field-level error is the better feedback pattern