---
id: "packages/active-ui/marker"
title: "Marker"
description: "A small note in a stream of content, such as a date divider between messages or a remark with an icon."
url: "/packages/active-ui/marker"
locale: "en"
revision: "e30a3ddc1c1a762e"
---

# Marker

A marker is a quiet line of text inside a stream: the date between messages, "edited" below a
post, a remark that closes a section. It is set small and muted, so it guides without competing
with the content around it.

**Example: A date divider and two remarks**

Client: Runs entirely in your browser. Source: `examples/ui/marker.tsx`.

```tsx
// apps/docs/examples/ui/marker.tsx
'use client';

import {InfoIcon, PencilIcon} from 'lucide-react';

import {
  Marker,
  MarkerContent,
  MarkerIcon,
} from '@workspace/active-ui/components/primitives/marker';

/**
 * A small note in a stream of content: a divider with a date between
 * messages, a remark with an icon, and a remark that closes a section.
 */
export default function MarkerExample() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <p className="text-sm">The statement was sent to 214 participants.</p>
      <Marker variant="separator">
        <MarkerContent>Today</MarkerContent>
      </Marker>
      <p className="text-sm">Three participants opened it within an hour.</p>
      <Marker>
        <MarkerIcon>
          <PencilIcon />
        </MarkerIcon>
        <MarkerContent>
          Edited by Sam de Vries at 10:42 ·{' '}
          <a href="#marker-history">history</a>
        </MarkerContent>
      </Marker>
      <Marker variant="border">
        <MarkerIcon>
          <InfoIcon />
        </MarkerIcon>
        <MarkerContent>Older messages are archived after a year.</MarkerContent>
      </Marker>
    </div>
  );
}
```

## Usage

```tsx
import {
  Marker,
  MarkerContent,
  MarkerIcon,
} from '@workspace/active-ui/components/primitives/marker';

<Marker variant="separator">
  <MarkerContent>Today</MarkerContent>
</Marker>;
```

## Anatomy

- `Marker`: the line. `variant`:

  - `default`: text with an optional icon;
  - `separator`: centred text with a rule on both sides, as a divider;
  - `border`: a rule below the text.

  `render` makes it another element; `markerVariants({variant})` returns its classes.
- `MarkerIcon`: an icon before the text, hidden from assistive technology.
- `MarkerContent`: the text; links inside it are underlined.

## What your application provides

The text, such as a date formatted in the reader's language with
[active-format](/packages/active-format), and the links in it.

## Accessibility

A marker is a `<div>` read as text in its place. A `separator` marker is not a `role="separator"`:
its text ("Today") is content, and it is read as such. For a separator without text, use
[Separator](/packages/active-ui/separator).

## API

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `variant` | `"border" \| "default" \| "separator" \| null` | no | `default` is text with an optional icon; `separator` centres the text between two rules, as a divider; `border` draws a rule below. |
| `render` | `ComponentRenderFn<HTMLProps, {}> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` | no | Allows you to replace the component's HTML element with a different tag, or compose it with another component.  Accepts a `ReactElement` or a function that returns the element to render. |

### Other parts

**MarkerIcon**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

MarkerIcon has no props of its own.

**MarkerContent**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

MarkerContent has no props of its own.

**markerVariants**: `(props?: (ConfigVariants<{ variant: { default: string; separator: string; border: string; }; }> & ClassProp) \| undefined) => string`