Mark

Mark component is used to highlight text with a background color. It uses the semantic HTML mark element for proper accessibility.

import { Mark } from "@ninna-ui/primitives"

pnpm add @ninna-ui/primitives

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Mark component to highlight text.

import { Mark, Text } from "@ninna-ui/primitives";

export default function Example() {
  return (
    <Text>
      This is some text with <Mark>highlighted content</Mark> in the middle.
    </Text>
  );
}

Basic

Default text highlighting.

This is some text with highlighted content in the middle.

Colors

Different color variants for highlighting.

neutralprimarysecondaryaccentinfosuccesswarningdanger

Use Cases

Real-world examples of Mark component usage.

Search Results

The React library is a JavaScript library for building user interfaces.

React makes it painless to create interactive UIs.

Important Information

Please note: This action cannot be undone. Make sure to backup your data before proceeding.

Status Indicators

Build status: Passed

Tests: 2 pending

Deployment: In progress

Code Documentation

The useState hook returns a stateful value and a function to update it. Use useEffect for side effects.

API Reference

Complete list of props for the Mark component.

Props

Prop	Type	Default	Description
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Color variant for the highlight
`className`	`string`	-	Additional CSS classes

Accessibility

Semantic HTML: Uses native mark element for proper semantics
Screen readers: Content is announced as highlighted/marked text
Color contrast: Text colors ensure readable contrast against backgrounds