Chat

TwMarker

TwMarker is a Blazor inline status marker for tool call lines, plus row separators and labelled dividers such as Today or New messages.

Last updated 20 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Status lines

Give TwMarker a Label and a Status to show a step an assistant took, such as a tool call. A running step shows a spinner, and a finished one a tick or a cross. Use Detail for muted text after the label.

Searched the web1.2s

Opened pricing.pdfFile not found

Reading 3 files

Write the summary

RAZOR

<div class="flex flex-col gap-2">
    <TwMarker Status="MarkerStatus.Succeeded" Label="Searched the web" Detail="1.2s" />
    <TwMarker Status="MarkerStatus.Failed" Label="Opened pricing.pdf" Detail="File not found" />
    <TwMarker Status="MarkerStatus.Running" Label="Reading 3 files" />
    <TwMarker Status="MarkerStatus.Pending" Label="Write the summary" />
</div>

Icons and colors

Set Icon to show your own icon, and Color to tint it. Without a Status, the marker is just an icon and a label.

Used the calculator

Thought for 4 seconds

2 files attached

RAZOR

<div class="flex flex-col gap-2">
    <TwMarker Icon="Icon.Tools" Color="Color.Info" Label="Used the calculator" />
    <TwMarker Icon="Icon.Stars" Color="Color.Accent" Label="Thought for 4 seconds" />
    <TwMarker Icon="Icon.Paperclip" Label="2 files attached" />
</div>

Live updates

Set Live to make the marker a polite live region, so screen readers announce it when its label or status changes.

Check the order status

RAZOR

<div class="flex flex-col items-start gap-3">
    <TwMarker Live Status="@_status" Label="@_label" />
    <TwButton Label="Run step" OnClick="RunAsync" Disabled="@(_status == MarkerStatus.Running)" />
</div>

CSHARP

@code {
    private MarkerStatus _status = MarkerStatus.Pending;
    private string _label = "Check the order status";
    
    private async Task RunAsync()
    {
        _status = MarkerStatus.Running;
        _label = "Checking the order status";
        StateHasChanged();
    
        await Task.Delay(1500);
    
        _status = MarkerStatus.Succeeded;
        _label = "Checked the order status";
    }
}

Separators

Set Variant to MarkerVariant.Separator for a rule between rows. Give it a Label, such as a date, to show it in the middle. Set Color to make a separator stand out, for example a danger colored "New messages" divider above unread messages.

Today

New messages

Unread since yesterday

RAZOR

<div class="flex flex-col gap-4">
    <TwMarker Variant="MarkerVariant.Separator" />
    <TwMarker Variant="MarkerVariant.Separator" Label="Today" />
    <TwMarker Variant="MarkerVariant.Separator" Label="New messages" Color="Color.Danger" />
    <TwMarker Variant="MarkerVariant.Separator" AriaLabel="Unread since yesterday">
        <strong>Unread</strong>&nbsp;since yesterday
    </TwMarker>
</div>

Accessibility

A status marker's icon or spinner is hidden from screen readers, and its state ("Done", "Failed", "In progress" or "Pending") is written out after the label, so it is never told by the icon or its color alone. A live marker announces its changes politely. A separator is exposed as a separator named by its Label. A separator with custom content needs an AriaLabel.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwMarkerTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Status`	string
`Icon`	string
`Pending`	string
`Succeeded`	string
`Failed`	string
`Label`	string
`Detail`	string
`Separator`	string
`Line`	string
`LineNeutral`	string
`LineColored`	string
`SeparatorLabel`	string

Global Theme Configuration

These reuse shared design tokens configured once on TwBlazorTheme, rather than being unique to this component.

Property	Type	Controls
`SeparatorColors`	TwBlazorPalette

Full reference: TwMarkerTheme on the API docs.

TwMarker

Status lines

Icons and colors

Live updates

Separators

Accessibility

Keyboard navigation

Theme configuration

Global Theme Configuration