Skip to content
search icon
clear
Component Status

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Chip component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the relevant grouping.
  3. Once the component needed is located, click and drag it into the frame/artboard.

How to use

  1. Select the Chip in the frame/artboard.
  2. Locate and expand the highlighted layer in the Layers Panel.
  3. Edit the Label. If the text wraps over one line, resize the width of the chip to avoid line breaks.
  4. Never add height to chips, only resize them horizontally in width.
  5. For chips that contain a nested icon:
    • Locate and select the Icon > Nested icon > Placeholder Icon layer in the Layers Panel.
    • Locate the Design tab in the Inspector Panel.
    • Under the Instance section, click the icon name to expand the menu.
    • Choose a new icon.
  6. For chips that contain an avatar:
    • Locate and select the Avatar circle layer in the Layers Panel.
    • Locate the Design tab in the Inspector Panel.
    • Under the Fill section, click on the Image to expand the image options menu.
    • Hover over the current image and click Choose image... to select a new image.

API

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
childrenNodefalse[]@ignore
disabledBoolfalsefalseDisabled
onDeleteFuncfalseundefinedDelete callback
onClickFuncfalseundefinedClick callback
variantEnum
'active' │ 'error' │ 'default'
falsedefaultVariant
Edit this page on GitHub