Skip to main content

Label

Labels are for small, sometimes numerical, bits of data. They are never actionable.

Examples

Default Label

<Label>Default</Label>

Icon Label

<Label 
icon="placeholder"
title="An outline of a car"
/>
<Label 
labelType="recommended"
>
Recommended
</Label>

Before and After Label

<Label 
labelType="beforeAndAfter"
>
Before and After
</Label>

Tally Label

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

Dot Label

<Label 
labelType="dot"
/>

Props

NameTypeDefault ValueRequiredDescription
iconstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | nullNoAn icon to render for the label's content.
labelType"icon" | LabelType | "default" | "beforeAndAfter" | "recommended" | "tally" | "dot"LabelType.DefaultNoWhich type of label should be rendered?