Typography
Mark
A mark element that highlights a run of text with a semantic color. The tint stays decorative and the words carry the meaning. It offers warning, success, info, danger, and primary.
ReactVueWeb Components
View in Storybook Playground
Examples
<p>
Please read the <Mark>important notice</Mark> before continuing.
</p>
<Mark status="success">Approved</Mark>Props
| Name | Type | Default | Description |
|---|---|---|---|
status | MarkStatus | warning | Semantic color intent. The highlight is decorative — meaning must be conveyed in the text itself (AAA 1.4.1). @default 'warning' |
children | ReactNode | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.