Chip
Chip displays a container that is used to highlight some important short information.Import
import { Chip } from "@prismane/core";
Usage
By default, Chip uses the primary color.
<Chip>Default</Chip>
Chip With Icon
<Chip icon={<Fire />}>New Release</Chip>
Chip Colors
By default, Chip uses the primary color. The Chip accepts all of PrismaneColors as values of the color prop.
<> <Chip>Primary</Chip> <Chip color="ruby">Ruby</Chip> <Chip color="lime">Lime</Chip> <Chip color="teal">Teal</Chip> </>
Chip Sizes
The Chip component supports all of the PrismaneBreakpoints as values for the size prop.
<> <Chip size="xs">xs Size</Chip> <Chip size="sm">sm Size</Chip> <Chip size="base">base Size</Chip> <Chip size="md">md Size</Chip> <Chip size="lg">lg Size</Chip> </>
Text Colors
To change the text color of the Chip, you can pass a value to the cl prop.
<Chip color="base" cl="diamond"> Custom text color </Chip>
API
Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.
- -
Chip