Chips
Small interactive components used to represent input, attributes, or operations.
Anatomy
1: Container
There must be
2: Text
There must be
1: Container
It must have, with customizable width.
2: Prefix icon
Must have, can be replaced
3: Text
There must be
4: Suffix icon
There must be, with the arrow pointing upwards.
2
1
1
1
2
3
3
4
2
1: Container
It must have, with customizable width.
2:text
There must be
3: Check mark
Optional (multiple selection use)
Chips
Chips
BTC
Variant/Type
Display Chips:
Chips
Menu Chips Filter Tag:
BTC
Filter Chips:
Chips
Multiple selection
Chips
Usage scenario
Chips
Chips
Chips
Chips
Chips
Chips
Chips
Chips
Chips
Chips
Tab
Tab
TON ecosystem
plate
Chips
Chips
Chips
Chips
Chips
Chips
Chips
Chips
Chips
Secondary
Primary
Type description:
Display Chips (Basic Filter Chips):
Used to display static information, such as tags and categories, commonly paired with tabs, or can be used independently.
Menu Chips (Menu Filter Chips):
Used for filtering, primarily used in dex+ scenarios.
Filter Chips (Filtering Tags):
Used to filter content, supporting single or multiple selection. Features: selectable/deselectable, typically used for data filtering, and supports single or multiple selection.
Interaction
Chips
Default
The initial or non-interactive state of the component
Chips
hover
Mouse hover state
Chips
Selected
The current content has been selected or marked.
Chips
Disable
Indicates options that are currently non-interactive or unavailable.
Label
Multilingual adaptation
punch
Resnt 7D nisqapi
I am alive.
Resnt 7D nisqapiapiapi
Non-uniform adaptive margin 8px
Monospace setting
Instructions:
Breakpoint Adaptation
Unequal Width: Adaptive Width
Equal Width Setting, font size dynamically shrinks + text wraps when content overflows
RTL
BTC
LTR
Arabic
RTL
Usage
ChipsChipsChipsChips
Chips
Do
ChipsChipsChipsChipsChipsCChipsC
Chips
Chips
Don't
In multiple languages, reduce the font size to the smallest or wrap to a maximum of two lines, aligning the height.
Chips Chips Chips Chips Filter Tag Filter Tag