Marker

The inverted triangle of the symbol, cut in CSS: a bullet, a caret, a cover shape.

import { Marker } from '@zitdevs/ui';

Examples

A bullet beside its text

<Marker />
<Marker color="accent" size={16} direction="right" />
<span className="flex items-center gap-2">
  <Marker color="accent" size={8} direction="right" /> A bullet beside its text
</span>

Props

Prop	Type	Default	Notes
color	MarkerColor	'primary'	A role; see below.
size	number	10	Length of the long side in px; the short side is 88% of it, as in the mark.
direction	'down' | 'up' | 'right' | 'left'	'down'
className	string	—	Placement, or a state colour such as peer-checked:bg-primary.
anything else	<span> attributes	—	Except aria-hidden, which is always on.

color	Role	Use it on
primary	--ui-primary	Light fields
ink	--ui-ink	Light fields
accent	--ui-accent	Any field
primaryInverse	--ui-primary-inverse	The inverse band
onPrimary	--ui-on-primary	The primary band
surface	--ui-surface	The bands
neutral	--ui-border-strong	Light fields, for an inactive row
current	the text colour	Anywhere

The website’s names map as blue → primary, navy → ink, orange → accent, blueLight → primaryInverse, white → onPrimary, cream → surface. Exported types: MarkerColor, MarkerDirection.

Accessibility

Always aria-hidden: a marker never carries meaning, the text beside it does. Never use one as the only sign of a state.

Without JavaScript

A <span> cut by clip-path: nothing to run.

Theming

The role its color names. To cut the triangle into another element, use the clip-triangle-down|up|right|left utilities.