# Alert messages

**`sonic-alert-messages`** renders a vertical stack of **`sonic-alert`** items from a **`messages`** array on a linked **data provider** (typical pattern: **`submitResultDataProvider`** after a form submit). Only entries with **`type="public"`** are shown. Each alert gets **`announce`** so screen readers pick up feedback after the request.

## With submit result

Bind **`dataProvider`** to the same publisher as **`submitResultDataProvider`**. API **`messages`** entries need **`type`**: **`public`**, plus **`content`** and optional **`status`** (`warning` · `success` · `error` · `info`).

<sonic-code>
  <template>
    <sonic-scope
      serviceURL="/docs-mock-api"
      formDataProvider="submit-example"
      submitResultDataProvider="submit-example-result"
    >
      <sonic-alert-messages dataProvider="submit-example-result" background class="mb-4"></sonic-alert-messages>
      <div class="grid gap-4 max-w-md">
        <sonic-input name="email" type="email" label="Email" value=""></sonic-input>
        <sonic-input name="password" type="password" label="Password" value=""></sonic-input>
        <sonic-submit endPoint="api/register" onClick>
          <sonic-button type="primary">Submit (empty fields → error messages)</sonic-button>
        </sonic-submit>
      </div>
    </sonic-scope>
  </template>
</sonic-code>

## Shared alert props

**`size`** · **`background`** and **`noIcon`** apply to every rendered **`sonic-alert`** in the list.

<sonic-code>
  <template>
    <sonic-button
      size="sm"
      variant="outline"
      class="mb-3"
      onclick="SonicPublisherManager.get('submit-example-result').set({ messages: [{ type: 'public', content: 'Compact inline feedback without icons.', status: 'info' }] })"
    >
      Load sample messages
    </sonic-button>
    <sonic-alert-messages
      dataProvider="submit-example-result"
      size="sm"
      background
      noIcon
    ></sonic-alert-messages>
  </template>
</sonic-code>

## Message shape

Example JSON on the result publisher (or API response merged into it):

<sonic-code language="typescript">
  <template>
{
  "messages": [
    {
      "type": "public",
      "content": "The product has been added to your cart",
      "status": "success"
    }
  ]
}
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `dataProvider` | publisher id | Source object; **`messages`** array is auto-filled via **Subscriber** |
| `size` | `2xs` … `2xl` (default `md`) | Passed to each **`sonic-alert`** |
| `background` | boolean | Tinted background on each alert |
| `noIcon` | boolean | Hides icons on each alert |
| `messages` | `Message[]` | Usually set by the publisher; each item uses **`content`** as alert **`text`** |

| Message field | Values | Description |
|---------------|---------|-------------|
| `type` | `public` | Required for the message to render |
| `content` | string | Alert body (**`text`** on **`sonic-alert`**) |
| `status` | `warning` · `success` · `error` · `info` | Alert **`status`**; defaults to **`default`** when omitted |

No slots — alerts are generated from **`messages`**.