Marker
A small note in a stream of content, such as a date divider between messages or a remark with an icon.
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.
The statement was sent to 214 participants.
Three participants opened it within an hour.
// 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#
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.
rendermakes it another element;markerreturns its classes.Variants({variant}) Marker: an icon before the text, hidden from assistive technology.Icon Marker: the text; links inside it are underlined.Content
What your application provides#
The text, such as a date formatted in the reader's language with 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.
API#
Import from @workspace/
Props marked Base UI are behaviour of the Base UI part this component is built on.
Props
- Type
"border""default""separator"null- Default
'default'
default is text with an optional icon; separator centres the text between two rules, as a divider; border draws a rule below.
- Type
ComponentRender Fn<HTMLProps, {}> ReactElement<…>
Allows you to replace the component's HTML element with a different tag, or compose it with another component.
Accepts a React or a function that returns the element to render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Other parts#
Parts that take only their element’s attributes
Marker: the attributes of aIcon <span>, with className and ref.Marker: the attributes of aContent <span>, with className and ref.
Functions, hooks and constants
(props?: (ConfigVariants<{ variant: { default: string; separator: string; border: string; }; }> & ClassProp) | undefined) => string