Chips

Chips present information clearly and efficiently, whether to select options or display status.

Category

Selection Chips

Selection Chips allow users to select an option or apply filters to content, serving as interactive, clickable elements. They simplify decision-making by visually indicating the chosen option, which helps narrow down the displayed data or results.

Status Chips

Status Chips display concise information about the current state or condition of an item. They provide immediate visual cues through color coding or icons to help users quickly understand the status.

Status Chips Types

We offer two types of status chips: primary and secondary.

Primary

Primary status chips use a solid block color background to ensure high visibility for statuses that require immediate attention, such as deposit or withdrawal statuses.

Secondary

In contrast, secondary status chips use a subtle tint as the background and are designed as indicator statuses for information that does not change as frequently. Example: accounts with high leverage or free swap enabled.

Sizes

We offer 3 size options for Selection Chips and 5 size options for Status Chips.

Selection Chips

sm

md

lg

Status Chips

xs

sm

md

lg

xl

Selection Chips States

Selection Chips exhibit six distinct states to communicate their current interaction or selection status. Please note that this guide exclusively focuses on Selection Chips, as Status Chips are designed solely to display information and are not interactive.