Label

Labels provide additional context to an experience. They can be used to highlight an important detail, or introduce a control or describing a common action or task.

Use a label to display a small amount of text that people don’t need to edit.

The preference is to use a single label per image or experience. Use a maximum of 2 labels.

Examples

Default Label

A simple label for general use. Available in two sizes.

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

<Label size="{md(default)|lg}">Label</Label>

Dark Bold Label

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

<Label ... labelType="darkBold">Label</Label>

Icon Label

An icon-only label. You must include a title attribute when using this! Available in two sizes.

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

<Label 
  ...
  icon={<PlaceholderIcon />}
  title="An outline of a car" 
/>

Good Label

A green-on-green label, used mainly for product recommendations. Available in two sizes.

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

<Label ... labelType="good">
  Good
</Label>

Bad Label

A red-on-red label. Available in two sizes.

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

<Label ... labelType="bad">
  Bad
</Label>

Before/After Label

A white-on-purple label, used only for labeling before and after content (usually photos). Available in two sizes.

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

<Label ... labelType="beforeAfter">
  Before/After
</Label>

Subtle Label

A subtle label. Available in two sizes.

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

<Label ... labelType="subtle">
  Label
</Label>

Tally Label

A numeric label used for annotating something actionable, like an unread message count. Available in one size.

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

<Label ... labelType="tally">
  1
</Label>

Dot Label

A simple shape label used for calling the users attention to something actionable. Available in one size.

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

<Label ... labelType="dot" />

Props

`LabelProps`

Name	Type	Default Value	Required	Description
All attributes of a `<aside />`
`icon`	`ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<any, string \| JSXElementConstructor<any>> \| ForwardRefExoticComponent<any>`		No	An icon to render for the label's content.
`labelType`	`"default" \| "dot" \| "icon" \| "disabled" \| "darkBold" \| "good" \| "bad" \| "beforeAfter" \| "subtle" \| "tally"`	`'default'`	No	Which type of label should be rendered?
`size`	`"md" \| "lg"`	`'md'`	No	Which label size should be rendered?

Examples​

Default Label​

Dark Bold Label​

Icon Label​

Good Label​

Bad Label​

Before/After Label​

Subtle Label​

Tally Label​

Dot Label​

Props​

LabelProps