Chips are compact elements that represent input, attributes, or actions.
They are used to display information in a concise format, typically as tags or for quick actions.
Types of Chips:
Use attribute chips to represent attributes or categories associated with content.
Non-Interactive: Since these chips represent fixed attributes, they should not respond to clicks or other interactive behaviors typically associated with editable or removable chips.
Use chips to display selected items or choices in a selection field context.
Removable: When applicable, allow users to remove a chip. This is especially important for multiple selectons.
Use chips for quick actions, such as adding or removing items or quick filters.
Interactive: Chips can be clicked or tapped to trigger actions directly.
Visual Feedback: Ensure chips provide clear visual feedback upon interaction
/*CHIPS*/
/* Common Chip Base */
.chip-base {
height: 22px;
min-width: 50px;
border-radius: 40px;
box-shadow: none;
font-family: var(--base-font-family);
font-size: 14px;
text-transform: capitalize;
font-weight: normal;
transition: background-color 0.0s, border-color 0.0s, color 0.0s;
display: inline-flex;
align-items: center;
justify-content: center;
}
/*Tagging Chips*/
/*Traffic Light*/
.tag-red {
@extend .chip-base;
border: var(--Red) solid 1px;
background-color: var(--Red-xl);
color: var(--Black);
padding: 0 18px;
}
.tag-amber {
@extend .chip-base;
border: var(--Yellow) solid 1px;
background-color: var(--Yellow-xl);
color: var(--Black);
padding: 0 18px;
}
.tag-green {
@extend .chip-base;
border: var(--Green) solid 1px;
background-color: var(--Green-xl);
color: var(--Black);
padding: 0 18px;
}
/*Blue*/
.tag-blue {
@extend .chip-base;
border: var(--MidBlue) solid 1px;
background-color: var(--MidBlue-xxl);
color: var(--Black);
padding: 0 18px;
}
/*Selection Chips*/
.selection-chip {
@extend .chip-base;
border: var(--Grey-xl) solid 1px;
background-color: var(--Grey-xl);
color: var(--Black);
padding-left: 18px;
}
.selection-chip .clear-icon {
font-size: 20px;
margin-left: 10px;
}
.selection-chip .clear-icon:hover {
color: var(--PuertoRico);
cursor: pointer;
}
/*Quick Action Chips*/
.filter-chip {
@extend .chip-base;
border: var(--Grey-l) solid 1px;
background-color: white;
color: black;
padding: 0 18px;
cursor: pointer;
transition: background-color 0.0s, border-color 0.0s, color 0.0s;
}
.filter-chip:hover {
background-color: var(--Grey-xl);
}
.filter-chip.selected {
background-color: var(--PuertoRico);
border: var(--PuertoRico) solid 1px;
color: white;
}
.filter-chip.selected:hover {
background-color: var(--PuertoRico-d);
border-color: var(--PuertoRico-d);
}
/*ICONS*/
.clear-icon {
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24;
color: var(--Grey-m);
}