Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Highlight

Highlight is a component that highlights specified strings within text. By default, it renders a p element.

Source@yamada-ui/highlight

Props

HighlightProps

query

Required

Description

Can be a single string or an array of strings. These are the terms that are highlighted in the text.

Type

string | string[]

align

Description

The CSS text-align property.

Type

UIValue<TextAlign>

casing

Description

The CSS text-transform property.

Type

UIValue<TextTransform>

decoration

Description

The CSS text-decoration property.

Type

UIValue<TextDecoration<0 | (string & {})>>

fragment

Description

If true, Fragment is used for rendering.

Type

boolean

Default

false

isFragment

Deprecated

Description

If true, Fragment is used for rendering.

Deprecated

Use fragment instead.

Type

boolean

Default

false

markProps

Description

Properties passed to the Mark component which is used to highlight the matched terms.

Type

MarkProps

MarkProps

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

Default

"secondary"

size

Description

The size of the Mark.

Type

string

variant

Description

The variant of the Mark.

Type

"outline" | "solid" | "subtle" | "text-accent" | "unstyled"

Default

"subtle"

Edit this page on GitHub

PreviousCodeNextForms