Structure
A component in the shape of a pill providing visual cues to prompt users to enter information or filter content.
Anatomy
Size
Change the size of the Chip including padding, font-size and icon size with the size property.
| Property | Token | px | rem |
|---|---|---|---|
| Height sm | size $2 | 24px | 1.5 |
| Height md | size $3 | 32px | 2 |
| Height lg | size $4 | 40px | 2.5 |
| Leading [Icon] size sm & md | sm | 16px | - |
| Leading [Icon] size lg | md | 24px | - |
| Trailing [Action Icon] size sm | sm | 24px | - |
| Trailing [Action Icon] size md & lg | md | 32px | - |
Paddings and margins
| Property | Token | px | rem |
|---|---|---|---|
| Unselected: Padding left & right sm | space $2 | 8px | 0.5 |
| Unselected: Padding left & right md & lg | space $3 | 12px | 0.75 |
| Selected: Padding left (all) | space $2 | 8px | 0.5 |
| Selected: Padding right sm | space $2 | 8px | 0.5 |
| Selected: Padding right md & lg | space $3 | 12px | 0.75 |
| Icon Margin-right (all) | space $1 | 4px | 0.25 |
We provide three options for gap space between chips. Small will be typically used whitin Input fields (multiselect) or when space is limited. Medium will be the default option that provides a comfortable distance for the set.
| Property & element | Token | px | rem |
|---|---|---|---|
| Gap between chips - sm | space $1 | 4px | 0.25 |
| Gap between chips - md (default) | space $2 | 18px | 0.5 |
| Gap between chips - lg | space $3 | 12px | 0.75 |
Border
| Property | pixel |
|---|---|
| Border-width (inside) - All | 1px |
| Focus shadow - Border (with 2px gap) | 2px |
.
| Property | Token | Pixel | Rem |
|---|---|---|---|
| Border radius | radii-0 | 4px | 0.25 |
Typography
| Element | Family | Weight | Size | Rem | px |
|---|---|---|---|---|---|
| sm | $body | 400 | $sm | 0.875rem | 14 |
| md | $body | 400 | $md | 1rem | 16 |
Color
| Property & Element - State | Token | Hex |
|---|---|---|
| Bg color - Default, Focus, Disabled | $grey100 | # |
| Bg color - Hover | $grey200 | # |
| Border-color - Default, Focus, Disabled | $grey600 | # |
| Border-color - Hover | $grey800 | # |
| Font-color - Default, Default focus | $grey800 | # |
| Font-color - Hover | $grey1000 | # |
| Property & Element - State | Token | Hex |
|---|---|---|
| Bg color - Default, Focus, Disabled | $blue100 | # |
| Bg color - Hover | $white | # |
| Border-color - Default, Focus, Disabled | $blue800 | # |
| Border-color - Hover | $blue1000 | # |
| Font-color - Default, Default focus | $blue800 | # |
| Font-color - Hover | $blue1000 | # |
.
| State | Value |
|---|---|
| Disabled: all elements | 30% opacity |