# components/Highlighted (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/Highlighted.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/Highlighted.tsx).

## Components

### `Highlighted`

Component.

`text` with the characters at `indices` (a search match) in the accent. One
inline box, so a flex or grid parent lays it out as one item, not one per run.
Offsets are UTF-16 positions, and an emoji counts as matched when either of its units is.

```ts
function Highlighted(props: HighlightedProps): Element
```

**Parameters**

- `props` (`HighlightedProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the wrapping `span`.
- `indices` (`readonly number[]`): UTF-16 offsets in `text` of the characters to highlight, as a string matcher reports
  them. An empty list renders `text` plain.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `text` (`string`): The full text to render.

Source: [ui/src/components/Highlighted.tsx:25](https://github.com/Tahul/zidane/blob/main/ui/src/components/Highlighted.tsx#L25)

## Interfaces

### `HighlightedProps`

Interface.

Props for [`Highlighted`](https://zidane.si/docs/reference/ui-components-highlighted.md#Highlighted).

```ts
interface HighlightedProps
```

**Properties**

- `className?` (`string`): Extra classes on the wrapping `span`.
- `indices` (`readonly number[]`): UTF-16 offsets in `text` of the characters to highlight, as a string matcher reports
  them. An empty list renders `text` plain.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `text` (`string`): The full text to render.

Source: [ui/src/components/Highlighted.tsx:4](https://github.com/Tahul/zidane/blob/main/ui/src/components/Highlighted.tsx#L4)