@agala-labs/ui

Alert

Communicates contextual status or a recoverable issue.

Examples

Sync paused

Reconnect the warehouse before accepting new orders.

Could not load inventory

Check the connection and try again.

Export is taking longer than expected.

<AgalaAlert variant="danger" title="Could not load"><template #default>Try again.</template><template #action><AgalaButton size="sm" variant="outline">Retry</AgalaButton></template></AgalaAlert>

Import

import { AgalaAlert } from '@agala-labs/ui'

API

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Semantic status.
`title`	`string`	—	Optional heading.
`dismissible`	`boolean`	`false`	Shows an internal close action.
`flat`	`boolean`	`false`	Removes the neutral surface and radius.
`icon`	`string \| false`	—	Overrides or hides the icon.
`class`	`string`	—	Consumer override class.

Slots

default — alert body
action — recovery or follow-up control

Accessibility

Icon, content, action, and dismissal remain in DOM order. Actions wrap below narrow messages while staying keyboard reachable. Urgent messages should be announced by the consuming workflow when appropriate. Dismissal collapses and fades the alert out; the transition respects reduced motion.