chip

import { Chip } from "woly";

Chip is used for categorizing or markup. Chips allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.

Chips support content labeling for accessibility and are readable by most screen readers, such as TalkBack. Text rendered in chips is automatically provided to accessibility services. Additional content labels are usually unnecessary.

When a chip can be removed a special cancel icon will appear at the far right to indicate this. The Remove Icon override provides the means to trigger this functionality.

If the Chip is used as an action trigger for related content avoid using it in scenarios where there is only one available action, or for configurations presenting only one selectable option.

As a standalone component, the most common use will be in some form of input.

Example

Weight and priority

Chip can be represented in primary, secondary, default or white priorities and can be styled with fill or outline.

Simple Chip
Simple Chip
Simple Chip
Simple Chip
<Playground direction="horizontal" size="S">
  <div
    style={{
      display: 'flex',
      justifyContent: 'space-between',
      width: 496,
      padding: '24px',
    }}
  >
    <Chip text="Simple Chip" priority="primary" />
    <Chip text="Simple Chip" priority="secondary" />
    <Chip text="Simple Chip" priority="default" />
    <Chip text="Simple Chip" priority="white" />
  </div>
</Playground>
Simple Chip
Simple Chip
Simple Chip
<Playground direction="horizontal" size="XS">
  <Chip outlined text="Simple Chip" priority="primary" />
  <Chip outlined text="Simple Chip" priority="secondary" />
  <Chip outlined text="Simple Chip" priority="default" />
</Playground>

Clickable

A chip can be either a simple visual component or an interactive element. When chip is clickable, it can change its state to disabled, hover, active and can be focused. In this case chip`s view can be changed depending on the state in which he is now.

Also, not only chip`s text can be interactive, the chip can include inside in own other interactive components, eg button-icon.

Click chip
Click button
Clicked chip and button
<Playground direction="horizontal" size="S">
  <Chip onClick={() => console.info('click')} text="Click chip" priority="primary" />
  <Chip
    rightIcon={
      <ButtonIcon
        filled
        icon={<IconClose />}
        onClick={() => console.info('IconClose clicked')}
        priority="primary"
      />
    }
    text="Click button"
    priority="primary"
  />
  <Chip
    onClick={() => console.info('click')}
    rightIcon={
      <ButtonIcon
        icon={<IconClose />}
        onClick={() => console.info('IconClose clicked')}
        priority="primary"
      />
    }
    text="Clicked chip and button"
    priority="primary"
  />
</Playground>
Click chip
Click button
Clicked chip and button
<Playground direction="horizontal" size="S">
  <Chip onClick={() => console.info('click')} outlined text="Click chip" priority="primary" />
  <Chip
    outlined
    rightIcon={
      <ButtonIcon
        icon={<IconClose />}
        onClick={() => console.info('IconClose clicked')}
        priority="secondary"
      />
    }
    text="Click button"
    priority="secondary"
  />
  <Chip
    onClick={() => console.info('click')}
    outlined
    rightIcon={
      <ButtonIcon
        icon={<IconClose />}
        onClick={() => console.info('IconClose clicked')}
        priority="default"
      />
    }
    text="Clicked chip and button"
    priority="default"
  />
</Playground>

Disabled

If chip is an interactive component it can be disabled. In case when chip contains an interactive component don`t pass the disable state only to it, make the entire component disable.

Disabled chip button
Disabled chip button
<Playground>
  <Chip
    disabled
    rightIcon={
      <ButtonIcon
        disabled
        icon={<IconClose />}
        onClick={() => console.info('IconClose clicked')}
        priority="primary"
      />
    }
    text="Disabled chip button"
    priority="primary"
  />
  <Chip
    disabled
    rightIcon={
      <ButtonIcon
        disabled
        icon={<IconClose />}
        onClick={() => console.info('IconClose clicked')}
        priority="primary"
      />
    }
    text="Disabled chip button"
    priority="default"
  />
</Playground>

Icons/Buttons

Оptional the сhip contains an icon on the left side as usually or on the right side in rarely cases. Aslo, chip can contain some other interactive component such like a button. As usual it represents on the right side of chip.

Chip with icon
Clicked Chip & icon
Chip with icon
Chip with icon
<Playground direction="horizontal" size="S">
  <Chip leftIcon={<IconPlus />} text="Chip with icon" priority="primary" />
  <Chip
    leftIcon={<IconPlus />}
    onClick={() => console.info('click')}
    text="Clicked Chip & icon"
    priority="primary"
  />
  <Chip
    leftIcon={<IconPlus />}
    onClick={() => console.info('click')}
    rightIcon={
      <ButtonIcon
        filled
        icon={<IconClose />}
        onClick={(event) => console.info('IconClose clicked')}
        priority="primary"
      />
    }
    text="Chip with icon"
    priority="primary"
  />
  <Chip
    disabled
    leftIcon={<IconPlus />}
    rightIcon={
      <ButtonIcon
        disabled
        icon={<IconClose />}
        onClick={(event) => console.info('IconClose clicked')}
        priority="primary"
      />
    }
    text="Chip with icon"
    priority="primary"
  />
</Playground>

Size

Mostly use three chip sizes: none, extra small and small. Small chips can be used as standalone components, chips of other sizes are used as part of complex components.

Chip with icon
Chip with icon
Chip with icon
<Playground>
  <block.N>
    <Chip
      leftIcon={<IconPlus />}
      onClick={() => console.info('click')}
      rightIcon={
        <ButtonIcon
          filled
          icon={<IconClose />}
          onClick={(event) => console.info('IconClose clicked')}
          priority="primary"
        />
      }
      text="Chip with icon"
      priority="primary"
    />
  </block.N>
  <block.XS>
    <Chip
      leftIcon={<IconPlus />}
      onClick={() => console.info('click')}
      rightIcon={
        <ButtonIcon
          filled
          icon={<IconClose />}
          onClick={(event) => console.info('IconClose clicked')}
          priority="primary"
        />
      }
      text="Chip with icon"
      priority="primary"
    />
  </block.XS>
  <block.S>
    <Chip
      leftIcon={<IconPlus />}
      onClick={() => console.info('click')}
      rightIcon={
        <ButtonIcon
          filled
          icon={<IconClose />}
          onClick={(event) => console.info('IconClose clicked')}
          priority="primary"
        />
      }
      text="Chip with icon"
      priority="primary"
    />
  </block.S>
</Playground>

Map of Chip

See full map of chip
<a href="/package/woly/component/chip-map">See full map of chip</a>

Props

NameTypeDefaultDescription
disabledbooleanfalseAttribute to disable chip
leftIconReact.ReactNodenullComponent to show on the left side of the text (ex.: icon)
onClickReact.MouseEvent<HTMLDivElement>nullCallback when chip is clicked
outlinedbooleanfalseChange chip`s view from filled to outlined
prioritystring'secondary'Priority prop to style Chip component
rightIconReact.ReactNodenullComponent to show on the right side of the text (ex.: icon, icon-button)
textstringText inside chip