Highlight
Highlight applies visual emphasis to text with filled, outline, or text-only color styles.
Basic Usage
This has a highlighted word in it.
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>Accessibility
Renders as a <mark> element, which screen readers may announce as highlighted content. Use meaningful colors that convey purpose.
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 |