# Alert

Notice strip with separate visual variant and optional polite or assertive announcements.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: hugeicons-icon, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add alert
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Description

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| class | string \| undefined | - | No | No | Classes added to the element. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |



### Root

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| variant | AlertVariant \| undefined | 'info' | No | No | Status the alert reports. It sets the icon and its tint. |
| icon | false \| Snippet<[]> \| undefined | - | No | No | Custom icon, or false to hide it. |
| announcement | "off" \| "polite" \| "assertive" \| undefined | 'off' | No | No | Announcement urgency, independent of appearance. Defaults to off. |
| class | (string & (ClassValue \| null)) \| undefined | - | No | No | Classes added to the element. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Title

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| class | string \| undefined | - | No | No | Classes added to the element. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import Root from './alert.svelte';
import Description from './alert-description.svelte';
import Title from './alert-title.svelte';

export type AlertVariant = 'info' | 'error' | 'success' | 'warning';

export type AlertProps = {
    /** Status the alert reports. It sets the icon and its tint. */
    variant?: AlertVariant;
    /** Custom icon, or false to hide it. */
    icon?: Snippet | false;
    /** Announcement urgency, independent of appearance. Defaults to off. */
    announcement?: 'off' | 'polite' | 'assertive';
} & DefaultProps &
    Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-live' | 'aria-atomic'>;

export type AlertTitleProps = DefaultProps;
export type AlertDescriptionProps = DefaultProps;

export { Description, Root, Title };
~~~~

## Examples

### Action

~~~~svelte
<script lang="ts">
    import * as Alert from '@mielui/svelte/components/alert';
    import { Button } from '@mielui/svelte/components/button';

    let checked = $state(false);
</script>

<div class="w-full max-w-xl">
    <Alert.Root variant="info" announcement="polite">
        <Alert.Title>{checked ? 'Snippet found.' : 'No events yet.'}</Alert.Title>
        <Alert.Description>
            {checked
                ? 'The first pageview will appear here within a few seconds.'
                : 'If the snippet is live, browse your site and the first pageview will appear here.'}
        </Alert.Description>
        <Button
            variant="secondary"
            size="sm"
            disabled={checked}
            onclick={() => {
                checked = true;
            }}
        >
            {checked ? 'Install checked' : 'Check the install'}
        </Button>
    </Alert.Root>
</div>
~~~~

### Variants

~~~~svelte
<script lang="ts">
    import * as Alert from '@mielui/svelte/components/alert';

    const messages = [
        {
            tone: 'info',
            title: 'Maintenance scheduled',
            description: 'Reports will be unavailable Sunday from 02:00 to 03:00 UTC.'
        },
        {
            tone: 'success',
            title: 'Import complete',
            description: 'All 128 contacts are ready to use.'
        },
        {
            tone: 'warning',
            title: 'Storage almost full',
            description: 'You have used 9.2 GB of your 10 GB allowance.'
        },
        {
            tone: 'error',
            title: 'Connection lost',
            description: 'Your draft is saved locally. Reconnect before publishing.'
        }
    ] as const;
</script>

<div class="grid w-full max-w-xl gap-3">
    {#each messages as message (message.tone)}
        <Alert.Root variant={message.tone}>
            <Alert.Title>{message.title}</Alert.Title>
            <Alert.Description>{message.description}</Alert.Description>
        </Alert.Root>
    {/each}
</div>
~~~~

For the rendered reference, visit [/docs/components/alert](/docs/components/alert).