@leafygreen-ui/chip NPM

Chip

npm (scoped)

View on MongoDB.design

Installation

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`
`darkMode`	`boolean`	Render the component in dark mode.	`false`
...	native `span` attributes	Any other props will be spread on the root `span` element