You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@leafygreen-ui/chip

Package Overview
Dependencies
7
Maintainers
0
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/chip

LeafyGreen UI Kit Chip


Version published
Maintainers
0
Created

Readme

Source

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={() => {}}
  popoverZIndex={1}
  chipCharacterLimit={10}
  chipTruncationLocation="end"
  dismissButtonAriaLabel="aria-label"
  darkMode
/>

Properties

PropTypeDescriptionDefault
labelReact.ReactNodeLabel 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 hovernone
chipCharacterLimitnumberDefines 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.
popoverZIndexnumberNumber that controls the z-index of the tooltip containing the full label text.
baseFontSize'13' | '16'Determines the base font-size of the chip.
variant'gray' | 'blue' | 'green' | 'purple' | 'red' | 'yellow' | 'blue'The color of the chip.
glyphReact.ReactElementAn icon glyph rendered before the text. To use a custom icon, see Link docs
disabledbooleanDetermines if the chip should be disabled.false
onDismissReact.MouseEventHandler<HTMLButtonElement>Callback when dismiss button is clicked. If set, a dismiss button will render.
dismissButtonAriaLabelstringaria-label for the dismiss button.${label} deselect
darkModebooleanRender the component in dark mode.false
...native span attributesAny other props will be spread on the root span element

FAQs

Package last updated on 20 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc