Highlight

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

Highlight applies visual emphasis to text with filled, outline, or text-only color styles.

Usage

Basic Usage

This has a highlighted word in it.

Open Editor

import { Highlight } from "@paramanu/typography-react"

export default function App() {
return <p>This has a <Highlight>highlighted word</Highlight> in it.</p>
}

<p>This has a <mark class="pm-highlight pm-highlight--primary">highlighted word</mark> in it.</p>

Guidelines

Accessibility

Renders as a <mark> element, which screen readers may announce as highlighted content. Use meaningful colors that convey purpose.

API

React Props

Prop	Type	Default	Description
color	"primary" | "danger" | "success" | "warning" | "info" | "neutral"	"primary"	Color
variant	"filled" | "outline" | "text"	"filled"	Visual variant

CSS Classes

Class	Purpose
pm-highlight	Base
pm-highlight--{color}	Color
pm-highlight--outline	Outline variant
pm-highlight--text	Text-only variant