Skip to content

UI Pattern

Status & Filter Chips

Compact controls for status, filtering, selection and removable values.

Color roles

Semantic colors

Color roles used across statuses, filters and selection states.

Success

Surface / Text / Indicator

Warning

Surface / Text / Indicator

Danger

Surface / Text / Indicator

Primary

Surface / Text / Indicator

Neutral

Surface / Text / Indicator

Info

Surface / Text / Indicator

Status chips

Project statuses

Read-only labels that communicate the current state at a glance.

CompletedPendingBlockedIn progressDraftScheduled

Filtering

Filter controls

Filter triggers open multi-select menus, while active selections appear as removable chips.

Active filtersInternalDesign

Input & scale

Removable values

Selected values appear inside the input and can be removed individually.

DesignFrontend
SmallMediumLargeLocked