Skip to content
Components

Chip, badge & tile

A chip labels one fact. A badge is a count and means nothing without the thing it is attached to. A tile is the neutral square a glyph sits in — and the rule that colour never fills it.

Chips

NeutralAccentOn titleSuccessInfoCautionDanger

muted is the design's "on title" case — a record that exists but is not drawn on the map. It reads as present-but-quieter rather than as a different kind of thing.

Removable

Publisher: Brisbane City
A filter chip in a table toolbar. The remove control takes its own accessible name, because "×" announces as nothing.

Cartographic swatches

The square is deliberately NOT the chip's own colour.

Creek floodingLow-density residentialRegistered easement
These hexes come from the DATA — a council publishes them and the map draws them — so they are passed in raw rather than tokenised. A design system does not get to choose what colour a flood overlay is.

Badges

54299+
`max` defaults to 99. An unbounded count breaks the pill's width and, past about a hundred, stops being information — "99+" and "412" prompt the same action.

Tiles

A rounded square holding one icon. It appears in list rows, approval stacks, alerts, file rows and search results, and it is one component rather than five because the rule it enforces is a system rule.

Neutral is the default and the norm. The filled tones are for status alerts only — a message ABOUT the view, not a subject in it.

Navigate

Esc