Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Chakra

/

Typography

/

Highlight

The highlight component take in a string and display some of the words as highlighted text.

The words to highlight can be selected using the query prop.

You can also customize how the hightlight will be rendered with the styles prop.

Hello World, we have some highlight
rx.chakra.highlight(
    "Hello World, we have some highlight",
    query=["World", "some"],
    styles={
        "px": "2",
        "py": "1",
        "rounded": "full",
        "bg": "grey",
    },
)

Highlights a specific part of a string.

PropTypeDescriptionValues
queryList

A query for the text to highlight. Can be a string or a list of strings.

stylesDict

The style of the content. Note: styles and style are different prop.

Event Triggers

See the full list of default event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting