Chips are compact elements that represent an input, attribute, or action. They allow users to enter information, make selections, filter content, or trigger actions.
Best Practices
- Chips are handy components that quickly convey information. 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 are compact components that represent discrete information.
- Chips should have a clear and helpful relationship to the content or task they represent.
- Chips should make tasks easier to complete, or content easier to sort.
Examples
Basic Chips
EzChip supports filled (default) and outlined variants.
Status
EzChip also support status variants, which are used to call attention to an individual item in a set.
Use a basic status (neutral, success, or informational) when an action is not required of the user or there’s not a compelling reason to draw their attention to an item.
Use an action status (attention, warning, error, or alert) when an action is required, or it needs attention. A dot icon is displayed.
Chip Actions
Chips with an onClick prop defined will change appearance on focus, hover, and click.
Chips with an onDelete prop defined will display a delete icon which changes appearance on hover.
Chip Colors
EzChip supports theme palette properties (primary, secondary, error, warning, info, and success) as well as all supported theme colors (ex. common.neutral130). Text and background colors should have high enough contrast for accessibility.
Chip Sizes
If you want to specify a size, use the size property. We currently support small, and medium (default).
Chip Icons
You can add an icon to the beginning of a chip by passing an EzIcon to the optional icon property.
Icon sizes will default to the font size of the text. If you need a different icon size, use size="inherit" on the EzIcon and wrap it in an element with the desired size.
Custom Styles
Supported styles should be used, but if you need to overwrite styles for the background, text, icon, or border, you can do so using provided class names (EzChip, EzChip-[variant], EzChip-clickable, EzChip-deletable, EzChip-deleteIcon, EzChip-disabled, EzChip-icon, and EzChip-label).
Props
| Name | Type | Default | Description |
|---|---|---|---|
label* | node | The content of the component. | |
color | EzThemeColors | common.neutral130 | The color of the component. Supports theme palette properties and colors. |
icon | element | Icon element. | |
onClick | func | Callback fired when the chip is clicked. | |
onDelete | func | Callback fired when the delete icon is clicked. If set, the delete icon will be shown. | |
size | small | medium | inherit | medium | The size of the component, or if inherit, the font size. |
variant | filled | outlined | neutral | success | informational | attention | warning | error | alert | filled | The variant to use. |