Highlight

A short, important message displayed inline and in context. Different from a Toast, which is global.

Polymorphic Component

By default, content is rendered inside a <div>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Basic Highlight

A simple admonition used to callout a small amount of content. Available in two sizes.

This is a medium (default) highlight.

This is a small highlight.

import { Highlight } from '@curology/ui-components-web/react/Highlight';

<Highlight
  size="{sm|md(default)}"
>
  This is a simple highlight.
</Highlight>

With Title

Adding a title adds more weight to the highlight. The title can be combined with content.

Medium Title

Small Title

Medium Title

Ullamco proident excepteur est cupidatat duis mollit magna Lorem labore officia.

Small Title

Sit labore qui proident consequat consectetur culpa consectetur nisi occaecat sit eiusmod in occaecat Lorem.

import { Highlight } from '@curology/ui-components-web/react/Highlight';

<Highlight
  ...
  title="Big Ol' Title"
>
  ...
</Highlight>

Composable Title

Similar to the child content, the title can be composed of JSX instead of a plain string

25%

Some child content

Some title content

85%

import { Highlight } from '@curology/ui-components-web/react/Highlight';
import { Progress } from '@curology/ui-components-web/react/Progress';
import { Typography } from '@curology/ui-components-web/react/Typography';

<Highlight title={<Progress />}>
  <Typography>Some child content</Typography>
</Highlight>

<Highlight title={<Typography>Some title content</Typography>}>
  <Progress />
</Highlight>

Highlight, Critical, Warning, and Success States

There are four states of the Highlight to add additional context to a message.

Basic Info

Ex laboris ad ut officia do esse sit sunt ipsum sint dolor amet occaecat.

Basic Info

Laborum occaecat et adipisicing ullamco labore enim nisi magna id consectetur.

Danger!

Id fugiat reprehenderit nostrud ex aliqua.

Danger!

Ut reprehenderit mollit aliquip exercitation Lorem fugiat cupidatat nulla fugiat eu minim cupidatat.

Warning...

Laborum amet consectetur veniam esse magna ex minim elit dolor proident.

Warning...

Sint amet qui anim exercitation eu nostrud ex nostrud duis excepteur.

Great Job

Do dolor excepteur duis magna occaecat ad anim in elit proident velit laboris aute proident.

Great Job

Exercitation nisi sunt aliqua incididunt do pariatur labore ad veniam reprehenderit nostrud velit proident.

import { Highlight } from '@curology/ui-components-web/react/Highlight';

<Highlight
  ...
  state="{highlight(default)|critical|warning|success}"
>
  ...
</Highlight>

With Icon

A trailing icon can be added for additional clarity.

Sweet Icon

Lorem dolor consequat magna sunt eiusmod anim eu culpa adipisicing dolor adipisicing aute.

Sweet Icon

Deserunt ipsum quis voluptate tempor ex culpa ut.

import { Highlight } from '@curology/ui-components-web/react/Highlight';

<Highlight
  ...
  icon={<PlaceholderIcon />}
>
  ...
</Highlight>

Props

HighlightProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
icon	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to render at the end of the highligh.
size	"md" | "sm"	"md"	No	The size of the highlight.
state	"dark" | "light" | "highlight" | "critical" | "warning" | "success"	"highlight"	No	The state of the highlight.
title	ReactNode		No	A title to display before the content.