Bain Logo

Chip

Jump to Props

Compact elements that represent an input, attribute, or action.

There are two main use cases for a Chip:

  1. If filters or search terms are applied to a dataset, each is represented by a Chip.
  2. Representing users

Import

Use

Basic
Disabled
Dismissable
Avatar
Custom Style
Note for Developers: Right now, the Chip component does not have any state handling. In other words, it's purely presentational. You'll need to handle all state in the parent component and pass in the handlers as props

1. Filters and Search Terms

Here's an example similar to Google Maps - where the user has set a number of filters on their search. This example shows only how these filters are removed by passing an onDismiss function.

Explore 🍷 ☕️ 🥗

Restaurants
$$$$
5+
Open Now

2. Representing Users

Active Users (3)

Adele
Freddie Mercury
Aretha Franklin

Interactions

Dismissing / Deleting

Passing the onDismiss handler as a function will show the dismiss button (ie. the "x" icon) and will fire that function when clicked.

Text

Clicking the actual Chip

You can pass an onClick function to the Chip component to fire an action when clicked. An example here might include selecting users from a group and then performing an action.

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
textstring

The text to display in the component

avatarUrlstring

Used when showing a user avatar

onClickfunction

Triggered when user clicks the element.

iconReactNode

Pass in any Icon element to appear to the left of the text.

onDismissfunction

Triggered when user clicks the X button. Note that the X button is only shown if an onDismiss handler is passed.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy