Alert, Asgard Docs

Feedback & overlays

Communicate status inline.

Alert displays contextual feedback banners with four severity levels and three visual variants.

Key features:

Severities: success, info, warning, error
Variants: standard, outlined, filled
Custom icons or icon={false} to hide defaults
Dismissible with onClose callback
action slot for embedding buttons or links

Loading preview…

When to use it

Form-level success or error summaries
Inline warnings before a risky action
Persistent informational banners
Alerts with an inline action (Undo, Retry)

Properties

Prop	Type	Default	Description
`severity`	`'success' \| 'info' \| 'warning' \| 'error'`	`'info'`	The severity level that determines the color and default icon.
`variant`	`'standard' \| 'outlined' \| 'filled'`	`'standard'`	The visual style variant of the alert.
`title`	`string`	—	Optional bold title text displayed above the alert content.
`children`	`ReactNode`	—	The main content of the alert message.
`icon`	`ReactNode \| false`	—	Custom icon element, or false to hide the default severity icon entirely.
`action`	`ReactNode`	—	Custom action element (e.g., a button) rendered in the action area of the alert.
`onClose`	`() => void`	—	Callback fired when the close button is clicked. When provided, a close button is automatically shown.

Notes

Set the icon prop to false to completely hide the default severity icon.
The action prop renders a custom element (typically a Button) in the alert action area, useful for undo or retry flows.
Providing an onClose callback automatically renders a close button; omit it for non-dismissible alerts.

Presets