Say Hello!
Send us your questions or customization on demand requests
We used to reply ASAP
Become an affiliate and earn up to 50%
You can participate in Setproduct partnership program and earn up to 50% from every sale you made
We used to reply ASAP
  • Visual effects enhanced for a chip to provide convenient feedback when a user interacts with the item.
  • Smooth animation implemented for an Active chip, when clicked. Simple Check icon appears slightly and disappears after second tap or click. The content is pushed and slides to the right.
  • Mobile & Web styles are available. It's recommended to use Rounded chip for a variety of cases, but in additional Square chips are your best fit for dense desktop layout.
  • Variants of Chips purposes as: Text-only, Closable, Contact, Icon Chip and Chip with implemented Counter.
  • Groups of chips available. Choose between Rounded for mobile or Square for desktop applications.

Chips UI for React

FILLED CHIPS

material react ui chips
Default Material style for impact filtering flows. Each chip gets lifted up while onHovered. And toggles into Selected mode after a single click.

OUTLINED CHIPS

material react ui chips outline
Implemented in this Material theme as an alternative style to display chips with less Impactful meaning. Styled with a bolder border when onHovered.

SQUARE CHIPS

material react ui chips outline
A variant of dense chips especially recommended for using in detailed and complicated web or desktop software.

CHIPS GROUP: OUTLINE

material react ui chips outline
Production-ready group component made of simple outlined chips for default selection

CHIPS GROUP: CONTACTS

material react ui chips contacts
Predefined combination of Chips for every case when a user interacts with selection or filtering for a group of Contacts.

CHIPS GROUP: DELETION

material react ui chips delete
In some cases Delete functionality for every chip in a group is required.

CHIPS GROUP: SQUARE

material react ui chips delete
All combinations listed above available in dense Square Chips styled for the optimal performance within desktop resolutions
Component "CHIPS"
Array of prop mdc_style: [shape, view, color]

Possible props:
- shape: def, action
- view: smooth, outlined
- color: red, green, yellow, dark or null (default, blue)

Component props:
- value: value on the left side
- checked: true/false
- badge: value on the badge
- icon: icon on the left side
- icon_anim: icon will be animated (on the left side)
- icon_close: icon on the right side (click to delete chips)
- remove: true/false (offset other chips after click icon_close to delete chips)
- avatar: user avatar

Usage example:
import Chips from "./components/chips/chips.jsx";

 <Chips
    mdc_style={["def", "smooth", "dark"]}
    icon_close={<Close />}
    remove="true"
    >
    Label
 </Chips>

<Chips
   mdc_style={["def", "smooth", "green"]} 
   badge="16"
   checked
   >
   Carrot
</Chips>

<Chips
   mdc_style={["def", "smooth", "dark"]} 
   icon_anim={<Done/>}
   >
   Notebook
</Chips>