# Marker

> An inline row calling out a small event between two message rows — a delivery status, a system note, a highlighted callout, or a labeled divider — colored by a semantic tone and shaped by a variant.

```ts
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"`.

## Examples

```tsx
<Marker color="success">
	<Marker.Icon><CheckIcon /></Marker.Icon>
	<Marker.Content>{t("marker.delivered")}</Marker.Content>
</Marker>
```

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

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

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

## Props

| 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

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

| 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

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

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