Alert

Overview

A status message that communicates contextual feedback and can optionally be dismissed.

<script lang="ts">
  import Alert from '@lostgradient/cinder/alert';
</script>

<Alert variant="success">Saved successfully.</Alert>

Live preview

Use when

Surfacing the result of a just-completed action such as a save failure or success.
Calling out a transient condition the user must notice immediately within a specific region.

Avoid when

Communicating a page- or app-wide notice that persists across views — use a banner instead.
Providing supplemental commentary or guidance inline with content — use a callout instead.

An alert with a close button that fires onDismiss.

Info, success, warning, and danger alerts.

Custom icon slot alongside the alert message.

Props for alert
Name	Type	Default	Required
`variant`	`'info'\|'success'\|'warning'\|'danger'\|'error'`	`'info'`
`dismissible`	`boolean`	`false`
`onDismiss`	`() => void`
`children`	`snippet`		req
`icon`	`snippet`