Chip

!npm (scoped)

#### View on MongoDB.design

Installation

$3

``shell
pnpm add @leafygreen-ui/chip
`

$3

`shell
yarn add @leafygreen-ui/chip
`

$3

`shell
npm install @leafygreen-ui/chip
`

Example

`js
import { Chip } from @leafygreen-ui/chip;

or

label="leafygreen"
variant="blue"
baseFontSize={13}
disabled
onDismiss={() => {}}
chipCharacterLimit={10}
chipTruncationLocation="end"
dismissButtonAriaLabel="aria-label"
darkMode
/>

`

Properties

| Prop | Type | Description | Default |
| -------------------------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| label | React.ReactNode | Label rendered in the chip | |
| chipTruncationLocation | 'end' \| 'middle' \| 'none' \| 'start' | Defines where the ellipses will appear in a Chip when the label length exceeds the chipCharacterLimit. If none is passed, the chip will not truncate. Note: If there is any truncation, the full label text will appear inside a tooltip on hover | none |
| chipCharacterLimit | number | Defines the character limit of a Chip before they start truncating. Note: the three ellipses dots are included in the character limit and the chip will only truncate if the chip length is greater than the chipCharacterLimit. | |
| baseFontSize | '13' \| '16' | Determines the base font-size of the chip. | |
| variant | 'gray' \| 'blue' \| 'green' \| 'purple' \| 'red' \| 'yellow' \| 'blue' | The color of the chip. | |
| glyph | React.ReactElement | An icon glyph rendered before the text. To use a custom icon, see Link docs | |
| disabled | boolean | Determines if the chip should be disabled. | false |
| onDismiss | React.MouseEventHandler | Callback when dismiss button is clicked. If set, a dismiss button will render. | |
| dismissButtonAriaLabel | string | aria-label for the dismiss button. | ${label} deselect |
| enableAlwaysShowTooltip _(optional)_ | boolean | When true, tooltip will always appear on hover regardless of truncation. When false or undefined, tooltip only appears when label is truncated. | false |
| formatTooltip _(optional)_ | (label: ReactNode) => ReactNode | Optional function that formats the tooltip content. When provided, the formatted content will be used instead of the raw label in the tooltip. Works with both truncated and always-visible tooltips. | |
| tooltipAlign _(optional)_ | 'top' \| 'bottom' | Determines the alignment of the tooltip relative to the chip. | 'bottom' |
| darkMode | boolean | Render the component in dark mode. | false |
| ... | native span attributes | Any other props will be spread on the root span` element |