Mark
Mark renders a native static marked passage with restrained, theme-aware Brick paint.
Built from the published package
The review found zero critical issues in the release candidate.
Know when Mark is the right part
Use it when
Use Mark for authored content whose relevance is already known.
Choose another path when
Do not use Mark for query matching, document-search state, stress emphasis, or selection behavior. Use Highlight for matching and Em for stress emphasis.
Installation and imports
For modular CSS:
Mark is also available from @flowstack-ui/brick.
Quick start
Visual recipes and states
Subtle is a quiet marked surface, solid is high emphasis, and plain preserves semantic marking without background paint. Accent and neutral choose closed semantic color relationships.
Examples
API
Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.
| Prop | Values | Default |
|---|---|---|
variant | subtle, solid, plain | subtle |
tone | accent, neutral | accent |
slot | string | mark |
Public exports are Mark, MarkProps, MarkVariant, and MarkTone.
Accessibility
Native mark expresses relevance. Mark adds no role or focus. Forced colors
uses system highlight colors; plain remains distinguishable with an underline.
Responsive behavior
Mark follows surrounding inline flow and wraps with the marked passage.
Styling and tokens
Customization
Choose props first, then documented variables for a deliberate local recipe.
Tokens and CSS hooks
Use .brick-mark, data-slot, data-tone, data-variant,
--brick-mark-background, --brick-mark-foreground,
--brick-mark-radius, and --brick-mark-padding-inline.
Advanced reference
Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.