Highlight

A typography component that emphasizes specific words using background or pseudo-element visual markers.

The quick brown fox jumps over the lazy dog

With Accent

Use the decoration-accent-{position} class to add a decorative accent to the component. Refer to the Accents section for more information.

The quick brown fox jumps over the lazy dog

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtlelink.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog

Customizing

globals.css


:root {
  --ex-highlight-px: calc(var(--spacing) * 1.5);
}

API

Element	Selector
`Mark`	`.ex-mark`

Prop	Type	Default
`as`	`ElementType`	`mark`
`asChild`	`boolean`	`false`