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
<Chip>basic chip</Chip>
Playground
Licenses
License Chips provide out-of-the box colors for known licenses. The following licenses have specific color support:
<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.
<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.