StellarUI

<stellar-callout>

Properties

Component

Example

Preview

12 unread messages. Tap to see.

Action

Markup

Copy

<stellar-callout icon="mdi:info">
  <span>12 unread messages. Tap to see.</span>
  <stellar-badge slot="action" appearance="soft" tone="neutral">Action</stellar-badge>
</stellar-callout>

API

Complete props, events, slots, and implementation notes for the shipped callout.

Props

Prop	Type	Default
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`appearance`	`solid \| soft \| outline \| dash`	`solid`
`direction`	`vertical \| horizontal`	`vertical`
`icon`	`string`	`''`

Events

Event	Source	Notes
custom events	none	`stellar-callout` does not emit custom events.

Slots

Slot	Notes
`icon`	Optional leading visual or status marker when the `icon` prop is not used.
default	Main alert body content.
`action`	Optional trailing or stacked action content.

Notes

The public tag is `stellar-callout`, backed by a real alert container with native slots for icon and action content.
The shipped API is `tone`, `appearance`, `direction`, and `icon`.
The docs page now uses Datastar controls to drive one live alert instance instead of a static showcase matrix.
`stellar-callout` uses `mode: 'open'`, so its styles stay encapsulated while still reading exported `stellar.css` variables through the shadow boundary.
The `icon` prop renders a built-in `stellar-icon`; the named `icon` slot remains available for custom leading content.
The visual baseline follows the shipped alert soft, outline, dash, and horizontal or vertical layout behavior with direct Stellar token mapping.