All components (204)

Highlight

Typography · Mark · .amset-mark

What it is and when to use it

A piece of text highlighted by hand, inside a sentence: what has to be looked at before the rest.

When to use it

What matters in a paragraph: a deadline, a condition, the figure that has changed.
tone picks the colour: highlight (the default, the soft gold of a highlighter pen), accent (the brand colour), secondary or tertiary.

When not to

The matches of a search inside a result: Highlight, which finds and marks them by itself.
A status ("Pending", "Paid"): Tag. A number above an icon: Badge.
Stressing a word when read aloud: that is <strong> or <em>, not a highlight.

Keyboard: it does not take part. It is not interactive.

Accessibility: it is a real <mark>, so colour is not the only thing that says it is highlighted: the element carries the meaning. Even so, not every screen reader announces a <mark>; if what is highlighted is essential to understand the sentence, the sentence also says it in words. The text is the main ink on soft gold in highlight, and in the other tones the text of its family on its soft background (--amset-accent-text on --amset-accent-soft…), in both themes.

Fine-tuning: --amset-mark-background and --amset-mark-color; each tone changes them.

What it looks like

The result with the searched text highlighted.

<Text>The result with <Mark>the searched text</Mark> highlighted.</Text>

Props

Import it with import { Mark } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`tone`	`"accent" \| "secondary" \| "tertiary" \| "highlight"`	`highlight` is the highlighter yellow; `accent`, the brand color.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-mark-background`	`var(--amset-gold-soft)`
`--amset-mark-color`	`var(--amset-ink)`

How to change it

.amset-mark {
  --amset-mark-background: ...;
  --amset-mark-color: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: