Skip to content

License Chip

A LicenseChip is a small wrapper around Chip used to represent licenses in a consistent way across the platform.

Colors & styling are enforced by the component, and the license prop is used to determine the color scheme. There's much less flexibility than a regular Chip, but it's a good way to ensure consistency.

Basic usage

MED
template
<Chip>basic chip</Chip>

Playground

MED

Licenses

License Chips provide out-of-the box colors for known licenses. The following licenses have specific color support:

MEDRECCANADUCOMANCBULK
template
<LicenseChip license="Medical" />
<LicenseChip license="Recreational" />
<LicenseChip license="Cannabis" />
<LicenseChip license="Adult Use" />
<LicenseChip license="Combined" />
<LicenseChip license="Ancillary" />
<LicenseChip license="Bulk" />

INFO

The license you pass will be displayed as you pass it up to 4 characters. If it's greater than 4 characters, it will truncate it to display the first 3 characters. We use those 3 characters to determine the color scheme of the chip. So it's a bit flexible in that you can pass in Medical, med, or Medicinal you're going to get the same result. If the license is not known, it will default to a blue color scheme.

Custom or unknown licenses

You can pass any string to the license prop, and if it's greater than 4 characters long, it will display the first letters with a color scheme of blue.

FOOYOLOXY
template
<LicenseChip license="foobar" />
<LicenseChip license="yolo" />
<LicenseChip license="Xy" />

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.