# SvAlert
An inline, persistent contextual message - info, success, warning, danger, or
neutral - with an icon, optional title, dismiss button, and trailing actions.
`SvAlert` stays in the layout, unlike a floating toast: use it for form-level
validation summaries, banner notices, and "here is what happened" panels. Colors
come from the grid's `--sg-*` semantic tokens, and the variant sets both the
accent and the ARIA role so urgent messages announce themselves.
Related: [SvBadge](https://svgrid.com/docs/help/ui-components/sv-badge/) · [SvEmptyState](https://svgrid.com/docs/help/ui-components/sv-empty-state/) · [Feedback & display overview](https://svgrid.com/docs/help/ui-components/feedback/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvAlert` starter into your app:
Prefer to see it first? `npx @svgrid/ui try alert` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvAlert` ships free in
`@svgrid/grid` (dependency-free):
The examples on this page import from `@svgrid/grid`:
```svelte
```
```ts
import { SvAlert } from '@svgrid/grid'
```
## Example
> Live demo: Status & display: alert, stat, timeline, chip, divider, empty - https://svgrid.com/demos/339-status-display/
```svelte
Your changes are live.
We could not charge your card.
{#snippet actions()}Retry{/snippet}
```
## Props
| Prop | Type | Default | Description |
| ------------- | ---------------------------------------------------------- | ------- | ------------------------------------------------------------------- |
| `variant` | `info` \| `success` \| `warning` \| `danger` \| `neutral` | `info` | Semantic color, icon, and ARIA role. |
| `title` | `string` | - | Bold heading above the message. |
| `dismissible` | `boolean` | `false` | Shows a close (x) button that hides the alert. |
| `onDismiss` | `() => void` | - | Called when the alert is dismissed. |
| `hideIcon` | `boolean` | `false` | Hides the leading status icon. |
| `soft` | `boolean` | `false` | Softer, borderless tint instead of the bordered card. |
| `children` | `Snippet` | - | The message body. |
| `actions` | `Snippet` | - | Trailing action buttons or links. |
| `icon` | `Snippet` | - | Custom leading icon, overriding the default glyph. |
## Examples
### Dismissible banners
Give `dismissible` and react to `onDismiss` to persist the dismissal:
```svelte
(seen = true)}>
New: keyboard shortcuts are here.
```
### Alerts with actions
The `actions` snippet renders a button row below the message - ideal for
retry / undo / view-details flows:
```svelte
You have edits that are not saved.
{#snippet actions()}
SaveDiscard
{/snippet}
```
### Soft inline notes
`soft` drops the border for a lighter tint that sits inside cards and forms:
```svelte
Read-only while syncing.
```
### Form validation summary
Show a single danger alert above a form when submission fails, listing the
fields that need attention:
```svelte
{#if errors.length}
{#each errors as e (e)}
{e}
{/each}
{/if}
```
The `danger` variant sets `role="alert"`, so the summary is announced the moment
it appears after a failed submit.
### Dismissible session banner
Combine `dismissible`, `onDismiss`, and an `actions` snippet for a one-time
notice the user can act on or clear:
```svelte
{#if !dismissed}
localStorage.setItem('trial-seen', '1')}
>
Upgrade to keep your data-app running past the trial.
{#snippet actions()}Upgrade{/snippet}
{/if}
```
## Accessibility
- `danger` and `warning` alerts use `role="alert"` so screen readers announce
them immediately; other variants use the quieter `role="status"`.
- The leading icon is decorative (`aria-hidden`); meaning lives in the text.
- The dismiss button is a real `