Concorde UI component — 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 ty Doc ID: core/components/ui/alert-messages/alert-messages. Keywords: Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, Alert messages, UI component, sonic-alert-messages, web component, sonic-alert, messages, submitResultDataProvider, type="public", announce, dataProvider, type. URL: https://concorde.supersoniks.org/core/components/ui/alert-messages.

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-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>

Shared alert props

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

<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>

Message shape

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

{
  "messages": [
    {
      "type": "public",
      "content": "The product has been added to your cart",
      "status": "success"
    }
  ]
}

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.