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

Default Highlight

This is a medium (default) highlight.

This is a small highlight.

<Highlight
  size="small|medium(default)"
>
  This is a simple highlight.
</Highlight>

With Title

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.

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

With Highlight, Critical, Warning, and Success States

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.

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

With Icon

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.

<Highlight
  ...
  icon="placeholder"
>
  ...
</Highlight>

Props

Name	Type	Default Value	Required	Description
icon	"head" | "circle" | ReactElement<any, string | JSXElementConstructor<any>> | "placeholder" | IconName | "accordion-caret-down" | ... 13 more ...		No	An icon to render at the end of the highligh.
size	"small" | "medium" | HighlightSize	HighlightSize.Medium	No	The size of the highlight.
state	"critical" | "warning" | "success" | State | "highlight"	State.Highlight	No	The state of the highlight.