Chip
The Chip component is a versatile UI element, designed to encapsulate and display individual pieces of information in a compact form. This component is commonly used to represent tags, labels, or selected items, providing a visually appealing way to manage and interact with discrete data points.
import
To utilize the Chip component, import it from @vivakits/react-components.
import { VKChip } from "@vivakits/react-components";Variant
variant prop specifies visual styling of the chip component. The Chip component comes with 2 different variants that can be changed using the variant prop.
Open
The open prop is a boolean prop which indicates if the chip is currently displayed or hidden. By default this is set to true.
Size
The size prop allows for consistent sizing across different parts of your user interface and offers 6 options.
Font size
The fontsize prop allows to set the font size specifically for the text within the chip. There are 6 options offered for this prop.
Color
The color prop defines the background colour of the chip to convey meaningful message with the chip. There are 7 options for color prop.
State
The state prop allows to set the current state or status of the chip. There are 3 options offered for this prop.
Rounded
The rounded prop is a boolean prop that indicates whether the chip should have rounded corner or not.
Icon
The are two props offerd to show icons on left or right side of the chip. leftIcon allows icon on left side and rightIcon allows icon on right side of the chip. On icon prop, icon component can be passed or a svg can be used directly as the value of the prop.
Example
Here are some examples of how Badge component can be used with the different props.
AvatarChip can be used with other component as well. Here is an example of chip being used with Input component.
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | ReactNode | Displays badge content | - |
| variant | filledoutlined | Specifies chip visual style | filled |
| size | xssmmdlgxl2xl | Specifies chip size | xs |
| fontSize | xssmmdlgxl2xl | Specifies fontsize of label inside chip | md |
| color | primarysecondarysuccessdangerwarningdarklight | Specifies chip background or border color | success |
| state | selectedunselecteddisabled | Specifies current state or status of the chip | selected |
| label | text | Defines the label on the chip | - |
| rounded | boolean | Defines if the chip will be rounded or not | false |
| leftIcon | JSX element | Icon component displayed on the left side of the chip | - |
| rightIcon | JSX element | Icon component displayed on the right side of the chip | - |
| onClick | function | Defines functionality on clicking the chip | - |
| onLeftIconClick | function | Defines functionality on clicking the left icon on chip | - |
| onRightIconClick | function | Defines functionality on clicking the right icon on chip | - |
| onRightIconClick | function | Defines functionality on clicking the right icon on chip | - |
| className | CSS | Additional CSS class(es) to apply to the chip component | - |
| iconClassName | CSS | Additional CSS class(es) to apply to the icon components | - |
| leftIconClassName | CSS | Additional CSS class(es) to apply to the left icon component | - |
| rightIconClassName | CSS | Additional CSS class(es) to apply to the right icon component | - |
| labelClassName | CSS | Additional CSS class(es) to apply to the label text within the chip | - |