StellarAdmin

Displays an inline note in a conversation, such as a status update, a system message or a labeled divider

Theme

<div class="flex w-full flex-col gap-6">
    <sa-marker variant="MarkerVariant.Separator">
        <sa-marker-content>Today</sa-marker-content>
    </sa-marker>
    <sa-message>
        <sa-message-avatar>
            <sa-avatar src="/avatars/avatar-2.jpg" name="Mika Tanaka"/>
        </sa-message-avatar>
        <sa-message-content>
            <sa-bubble variant="BubbleVariant.Secondary">
                <sa-bubble-content>
                    Your Kyoto itinerary is confirmed — 12 to 19 April.
                </sa-bubble-content>
            </sa-bubble>
        </sa-message-content>
    </sa-message>
    <sa-marker>
        <sa-marker-icon>
            <sa-icon name="ticket"/>
        </sa-marker-icon>
        <sa-marker-content>E-tickets issued for 2 travellers</sa-marker-content>
    </sa-marker>
    <sa-message align="MessageAlign.End">
        <sa-message-avatar>
            <sa-avatar src="/avatars/avatar-1.jpg" name="Priya Raman"/>
        </sa-message-avatar>
        <sa-message-content>
            <sa-bubble>
                <sa-bubble-content>
                    Wonderful — could you add the Arashiyama day trip as well?
                </sa-bubble-content>
            </sa-bubble>
        </sa-message-content>
    </sa-message>
</div>

Usage

A marker is composed of <sa-marker> wrapping an optional <sa-marker-icon> and a <sa-marker-content>.

<sa-marker variant="...">
    <sa-marker-icon>
        ...
    </sa-marker-icon>
    <sa-marker-content>
        ...
    </sa-marker-content>
</sa-marker>

A marker takes the full width of its container and reads as a quieter, smaller line than the messages around it. That is what lets it sit between the messages in a thread — a delivery receipt, a system note, the date the conversation moved on to — without competing with them.

Examples

Variant

Set variant to pick the layout. Default is the plain inline marker for a status update or a note, Border adds a rule under the row to separate it from what follows, and Separator centres the content with a divider line running out to each side.

Theme

<div class="flex w-full flex-col gap-6">
    <sa-marker>
        <sa-marker-icon>
            <sa-icon name="circle-check"/>
        </sa-marker-icon>
        <sa-marker-content>Booking reference VYG-4821 confirmed</sa-marker-content>
    </sa-marker>
    <sa-marker variant="MarkerVariant.Border">
        <sa-marker-icon>
            <sa-icon name="credit-card"/>
        </sa-marker-icon>
        <sa-marker-content>Deposit of €450 received</sa-marker-content>
    </sa-marker>
    <sa-marker variant="MarkerVariant.Separator">
        <sa-marker-content>Tuesday, 12 April</sa-marker-content>
    </sa-marker>
</div>

Icon

Put an icon in <sa-marker-icon> to say at a glance what kind of note the marker is. The icon is decorative — it renders with aria-hidden — so the meaning has to be carried by the <sa-marker-content> text next to it. For a marker that is only an icon, give the <sa-marker> an aria-label so it is not announced as empty.

Theme

<div class="flex w-full flex-col gap-4">
    <sa-marker>
        <sa-marker-icon>
            <sa-icon name="plane-takeoff"/>
        </sa-marker-icon>
        <sa-marker-content>Flight NH212 departs Heathrow at 11:40</sa-marker-content>
    </sa-marker>
    <sa-marker>
        <sa-marker-icon>
            <sa-icon name="hotel"/>
        </sa-marker-icon>
        <sa-marker-content>Two nights at the Kanra Kyoto added to the itinerary</sa-marker-content>
    </sa-marker>
    <sa-marker>
        <sa-marker-icon>
            <sa-icon name="paperclip"/>
        </sa-marker-icon>
        <sa-marker-content>Mika attached kyoto-itinerary.pdf</sa-marker-content>
    </sa-marker>
</div>

Separator

The Separator variant is the labeled divider you would use for a date or a section break in a thread.

Theme

<div class="flex w-full flex-col gap-6">
    <sa-marker variant="MarkerVariant.Separator">
        <sa-marker-content>Monday, 11 April</sa-marker-content>
    </sa-marker>
    <sa-message>
        <sa-message-avatar>
            <sa-avatar src="/avatars/avatar-2.jpg" name="Mika Tanaka"/>
        </sa-message-avatar>
        <sa-message-content>
            <sa-bubble variant="BubbleVariant.Secondary">
                <sa-bubble-content>
                    Your driver will collect you from the hotel at 09:15 tomorrow.
                </sa-bubble-content>
            </sa-bubble>
        </sa-message-content>
    </sa-message>
    <sa-marker variant="MarkerVariant.Separator">
        <sa-marker-content>Tuesday, 12 April</sa-marker-content>
    </sa-marker>
    <sa-message align="MessageAlign.End">
        <sa-message-avatar>
            <sa-avatar src="/avatars/avatar-1.jpg" name="Priya Raman"/>
        </sa-message-avatar>
        <sa-message-content>
            <sa-bubble>
                <sa-bubble-content>
                    He's here — thank you for arranging it.
                </sa-bubble-content>
            </sa-bubble>
        </sa-message-content>
    </sa-message>
</div>

Do not add role="separator" to a labeled divider. A separator takes its accessible name from aria-label rather than from its content, and its contents are treated as presentational, so the visible label would not be announced. The divider lines here are decorative CSS pseudo-elements and the label is ordinary text, so the marker needs no role at all.

Status

For a marker that reports something in progress, set role="status" so assistive technology announces it when it appears and again when the text changes. Pair it with a <sa-spinner> in the icon slot.

Theme

<div class="flex w-full flex-col gap-6">
    <sa-message align="MessageAlign.End">
        <sa-message-avatar>
            <sa-avatar src="/avatars/avatar-1.jpg" name="Priya Raman"/>
        </sa-message-avatar>
        <sa-message-content>
            <sa-bubble>
                <sa-bubble-content>
                    Could you check whether the Sagano railway still has seats on the 14:00?
                </sa-bubble-content>
            </sa-bubble>
        </sa-message-content>
    </sa-message>
    <sa-marker role="status">
        <sa-marker-icon>
            <sa-spinner/>
        </sa-marker-icon>
        <sa-marker-content>Checking availability with the operator</sa-marker-content>
    </sa-marker>
</div>

Link

Use <sa-marker-link> instead of <sa-marker> to render the marker as an <a>, making the whole row a link. This is the marker for a note that points somewhere — an attached document, a booking, a route on a map. Its accessible name comes from the marker text.

Theme

<div class="flex w-full flex-col gap-6">
    <sa-message>
        <sa-message-avatar>
            <sa-avatar src="/avatars/avatar-2.jpg" name="Mika Tanaka"/>
        </sa-message-avatar>
        <sa-message-content>
            <sa-bubble variant="BubbleVariant.Secondary">
                <sa-bubble-content>
                    I've put the full day-by-day plan together for you.
                </sa-bubble-content>
            </sa-bubble>
        </sa-message-content>
    </sa-message>
    <sa-marker-link href="#">
        <sa-marker-icon>
            <sa-icon name="file-text"/>
        </sa-marker-icon>
        <sa-marker-content>Open the Kyoto itinerary</sa-marker-content>
    </sa-marker-link>
    <sa-marker-link href="#">
        <sa-marker-icon>
            <sa-icon name="map-pin"/>
        </sa-marker-icon>
        <sa-marker-content>View the Arashiyama walking route</sa-marker-content>
    </sa-marker-link>
</div>

The URL can be specified a couple of ways:

You can use the href property to specify any valid URL as per the href property of the anchor element.
You can use any of the attributes that are valid for specifying the URL for the ASP.NET Core Anchor Tag Helper, such as asp-controller, asp-action, asp-page, etc. Please refer to the Anchor Tag Helper documentation for more examples.

Button

Use <sa-marker-button> to render the marker as a <button>, for a marker that acts rather than reads — retrying a message that failed to send, loading the earlier part of a conversation.

Theme

<div class="flex w-full flex-col gap-6">
    <sa-message align="MessageAlign.End">
        <sa-message-avatar>
            <sa-avatar src="/avatars/avatar-1.jpg" name="Priya Raman"/>
        </sa-message-avatar>
        <sa-message-content>
            <sa-bubble variant="BubbleVariant.Destructive">
                <sa-bubble-content>
                    Please move our transfer to 08:30.
                </sa-bubble-content>
            </sa-bubble>
        </sa-message-content>
    </sa-message>
    <sa-marker-button>
        <sa-marker-icon>
            <sa-icon name="rotate-cw"/>
        </sa-marker-icon>
        <sa-marker-content>Message not delivered. Try again</sa-marker-content>
    </sa-marker-button>
</div>

Prefer these over attaching a click handler to a plain <sa-marker>: rendering a real <a> or <button> is what makes the marker reachable by keyboard and announced as interactive.

API Reference

`<sa-marker>`

Renders a <div> element, forwarding any global attributes.

Prop

Type

`<sa-marker-icon>`

Renders a <span> element holding a decorative icon, forwarding any global attributes. It is hidden from assistive technology with aria-hidden.

`<sa-marker-content>`

Renders a <span> element holding the marker text, forwarding any global attributes.

`<sa-marker-link>`

Renders an <a> element in place of <sa-marker>, making the whole marker a link.

Prop

Type

Routing attributes

The link marker also accepts the same routing attributes as the ASP.NET Core Anchor Tag Helper for generating the href. Supply either an href or these attributes — not both.

Prop

Type

`<sa-marker-button>`

Renders a <button> element in place of <sa-marker>, making the whole marker activatable. The type defaults to button so a marker inside a form does not submit it; set type explicitly to override that.

Prop

Type

Marker

On this page