Chip

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/chip

Yarn

yarn add @leafygreen-ui/chip

NPM

npm install @leafygreen-ui/chip

Example

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

<Chip label="leafygreen" />

or

<Chip
  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<HTMLButtonElement> | 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 |