Feedback

Alerts

Inline messages for info, success, warning and errors.

Inline status alerts — colors, optional close button, and hideable icon.

Colors

neutral, info, success, warning, danger — each with a default icon.

Note A neutral status message.

Info Something you should know.

Saved Your changes were stored.

Careful Review before continuing.

Failed The request could not be completed.

<.alert color="neutral" title="Note">A neutral status message.</.alert>
<.alert color="info" title="Info">Something you should know.</.alert>
<.alert color="success" title="Saved">Your changes were stored.</.alert>
<.alert color="warning" title="Careful">Review before continuing.</.alert>
<.alert color="danger" title="Failed">The request could not be completed.</.alert>

Title & close

hide_close={false} shows a dismiss button (JS.hide on the alert id).

Unsaved Discard or save before leaving.

Hide icon

hide_icon removes the leading icon entirely.

No icon Icon hidden via hide_icon.

Custom icon

Pass an :icon slot to replace the default glyph.

Custom icon Using the :icon slot.

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`color`	`neutral \| info \| success \| warning \| danger`	`"neutral"`	Semantic color; also picks the default status icon.
`hide_close`	`boolean`	`true`	Hide the dismiss button (default).
`hide_icon`	`boolean`	`false`	Omit the leading status icon.
`id`	`string`	`nil`	Element id; auto-generated when omitted.
`on_close`	`any`	`nil`	JS command run when the alert is dismissed (Fluxon parity); its presence shows the close button. Defaults to hiding the alert.
`subtitle`	`string`	`nil`	Secondary line under the title.
`title`	`string`	`nil`	Primary heading shown next to the icon.
Slots
`:icon`	Custom leading icon; overrides the color default.
`:inner_block`	Alert body content below the title.