Chip

A component that displays a chip with a label and optional icon, used for tags or filters.

Installation

import { Chip } from 'uxp/components';

Signature

const Chip: React.FunctionComponent<ChipProps>

Examples

<Chip
  label="Filter"
  icon="filter"
/>

<Chip
  label="Clickable Chip"
  icon="star"
  iconPosition="right"
  backgroundColor="#f0f0f0"
  textColor="#333"
  onClick={(e) => console.log('Chip clicked')}
  additionalStyles={{ borderRadius: '8px' }}
/>

Properties

Name	Type	Mandatory	Default Value	Example Value
icon	string	No	-	-
label	string | ReactNode	Yes	-	-
iconPosition	'left' | 'right'	No	-	-
backgroundColor	string	No	-	-
textColor	string	No	-	-
onClick	(e: React.MouseEvent) => void	No	-	-
additionalStyles	React.CSSProperties	No	-	-

Related Types

• ChipProps