Marker

An inline row calling out a small event between two message rows.

Today

Delivered · 14:02

Ana joined the conversation

Reconnecting — messages will send once you are back online

Generating a reply…

View code

<div mix={[vstack({ gap: 4, align: "stretch" })]}>
	<Marker variant="separator">
		<Marker.Content>Today</Marker.Content>
	</Marker>

	<Marker color="success">
		<Marker.Icon>
			<CheckIcon />
		</Marker.Icon>
		<Marker.Content>Delivered · 14:02</Marker.Content>
	</Marker>

	<Marker>
		<Marker.Icon>
			<UserPlusIcon />
		</Marker.Icon>
		<Marker.Content>Ana joined the conversation</Marker.Content>
	</Marker>

	<Marker variant="border" color="warning">
		<Marker.Icon>
			<TriangleAlertIcon />
		</Marker.Icon>
		<Marker.Content>Reconnecting — messages will send once you are back online</Marker.Content>
	</Marker>

	<Marker>
		<Marker.Icon aria-hidden={undefined}>
			<Spinner size="sm" aria-label="Generating a reply" />
		</Marker.Icon>
		<Marker.Content mix={[textShimmer()]}>Generating a reply…</Marker.Content>
	</Marker>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Marker } from "@sdxc/ui";

Renders the row's host element: a centered flex line framed through the data-variant and data-color attributes, with variant="separator" also picking up role="separator".

Composition

The parts the component publishes, each a static property of the host.

Marker
Marker.IconRenders Marker.IconProps.children as the row's glyph slot, hidden from assistive technology unless a consumer overrides it for a nested accessible control like Spinner.
Marker.ContentRenders Marker.ContentProps.children as the row's caption: a <span> inheriting its color, size, and weight from the Marker root so a single data-color drives the icon and caption together.

Examples

<Marker>
	<Marker.Content>{t("marker.userJoined", { name: user.name })}</Marker.Content>
</Marker>

<Marker variant="border" color="warning">
	<Marker.Icon><TriangleAlertIcon /></Marker.Icon>
	<Marker.Content>{t("marker.reconnecting")}</Marker.Content>
</Marker>

<Marker variant="separator">
	<Marker.Content>{t("marker.today")}</Marker.Content>
</Marker>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`variant?`	`"default" \| "border" \| "separator"`	Visual shape of the row. Defaults to DEFAULT_VARIANT.
`color?`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role. Defaults to DEFAULT_COLOR.
`children`	`RemixNode`	The row's compound parts: Marker.Icon followed by Marker.Content.

Also accepts everything in TagProps<"div">.

Marker.Icon

Prop	Type	Description
`children`	`RemixNode`	The icon graphic, typically a single SVG icon, or a nested control such as Spinner.

Also accepts everything in TagProps<"span">.

Marker.Content

Prop	Type	Description
`children`	`RemixNode`	The row's caption text.

Also accepts everything in TagProps<"span">.

Types

Name	Values	What it decides
`Variant`	`"default" \| "border" \| "separator"`	Visual shape the row renders with: `"default"` for a plain, centered caption, `"border"` for a bordered, tinted callout panel, and `"separator"` for a caption flanked by a hairline divider on either side.
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role, each mapped to its matching `--ui-*` variables.