ChipProps API Reference
Prop reference
| Title | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'outlined' | 'danger' | 'primary' | Variant of the chip, affects background and text color |
| startAdornment | ReactElement | – | Icon or element to display at the start of the chip, will be cloned with size prop |
| endAdornment | ReactElement | – | Icon or element to display at the end of the chip, will be cloned with size prop |
| inline | boolean | false | Whether the chip should be displayed inline or as a block element |
| onClick | OnClickFunction<HTMLDivElement> | – | - |
| size | 'small' | 'medium' | 'large' | – | - |
* Props marked with an asterisk are required.
CSS target reference
| Export | CSS Class Target | Description |
|---|---|---|
| ChipTargetClassRoot | .NPUI-Chip-root | Root of the chip |
| ChipTargetClassStartAdornment | .NPUI-Chip-startAdornment | Start adornment of the chip |
| ChipTargetClassEndAdornment | .NPUI-Chip-endAdornment | End adornment of the chip |
| ChipTargetClassLabel | .NPUI-Chip-label | "Label" of the chip (text) |
Exports are available from /src/components/chip/chip.tsx or from
Related APIs