Chip, badge & tile

Chips

NeutralAccentOn titleSuccessInfoCautionDanger

Code

<GdChip>Neutral</GdChip>
<GdChip tone="accent">Accent</GdChip>
<GdChip tone="muted">On title</GdChip>
<GdChip tone="caution">Caution</GdChip>

Removable

Publisher: Riverton City

A filter chip in a table toolbar.

Code

<GdChip
  tone="accent"
  removable
  remove-label="the Riverton City filter"
  @remove="clearPublisher"
>
  Publisher: Riverton City
</GdChip>

Cartographic swatches

Creek floodingLow-density residentialRegistered easement

Code

<GdChip :swatch="overlay.colour">{{ overlay.name }}</GdChip>
<GdChip tone="muted" :swatch="record.colour">{{ record.name }}</GdChip>  <!-- on title, not mapped -->

Badges

574299+

The third badge is 412 with the default max of 99, so it renders 99+ and carries its own accessible name.

Code

<GdBadge :value="5" />
<GdBadge :value="42" tone="neutral" />
<GdBadge :value="7" tone="solid" />
<GdBadge :value="412" label="412 unread" />

Tiles

Neutral is the default and the norm. The filled tones are for status alerts only.

Code

<GdTile :size="36"><GdIcon :d="council" :size="20" /></GdTile>
<GdTile :size="36" tone="caution"><GdIcon :d="warn" :size="18" :stroke="2.6" /></GdTile>

API

GdChip

Props

PropTypeDefault

The four generic statuses, plus `accent`, the plain `neutral` default, and `muted` — the design's "on title" case, for a record that exists but is not drawn on the map.

swatchstring—

A cartographic colour, straight from the data — never a token. Renders as a 10px square with an inner ring, so a pale constraint colour still has an edge on white.

removableboolean—

Adds the remove button, which emits `remove`. The chip does not remove itself.

removeLabelstring"filter"

What the remove button says it removes: the accessible name reads "Remove {removeLabel}". "×" announces as nothing.

size"sm" | "md""md"

`sm` is the toolbar and table-cell rung — caption type, tighter padding.

Slots

default

The label. One fact.

icon

A glyph between the swatch and the label.

Events

remove

The remove button was pressed.

GdBadge

Props

PropTypeDefault

valuerequirednumber—

The count. Drawn in tabular numerals so a column of badges does not jitter.

maxnumber99

Above this the badge shows "{max}+". An unbounded count breaks the pill's width.

tone"accent" | "neutral" | "solid""accent"

`accent` is the wash-and-ink pill and `neutral` the quiet sunken one — both are WASHES, and both assume a plain surface behind them. `solid` is the filled counter, for a badge that sits ON something: it is the only tone that separates from a selected or sunken ground.

labelstring—

The accessible name — "3 unread", not "3". Without it the badge announces the bare number, and "412" on its own means nothing.

GdTile

Props

PropTypeDefault

sizenumber36

Edge in pixels. At 28 and under the radius steps down from `--gd-radius-lg` to `--gd-radius-md`.

tone"success" | "info" | "caution" | "danger"—

A FILLED status tile, for status alerts only. Setting it overrides `sunken`.

sunkenbooleantrue

The recessed neutral ground: the default, and what a tile looks like everywhere except an alert. `false` leaves it transparent.

Slots

default

One icon, centred. Usually a `GdIcon` at about 0.55 of `size`.

Usage Guidelines

Use a chip for one fact about a subject — a publisher, a zone, an applied filter.
Use a badge only attached to something else. A badge alone is a number with no noun.
Use swatch when the fact has a colour on the map, and pass the council's hex straight through.
Use tone="muted" for a record that exists but is not drawn — present, quieter, not a different kind of thing.
Set removeLabel on every removable chip, and label on every badge whose number needs a noun.
Leave a tile neutral unless it is the glyph of a status alert. If a colour must appear beside a row, it is a swatch, not a fill.
Do not tone a chip to mean planning content. The four statuses are generic — the verdict is the approval stack's job.

Behavior & Anatomy

The muted chip

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.

The swatch, and why it is not the chip

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.

Why the badge has a maximum

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.

Why the tile is one component rather than five

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.