Badge Row

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Badges *

  badges · array

  The chips, in reading order. Three to five is the sweet spot; past that the row scales itself down to stay inside the frame.

  now: 4 items

• Accent index

  accentIndex · number

  Which chip (0-based) gets the filled accent treatment and lands last with a slight overshoot. Exactly one chip carries the emphasis — omit for an all-outline row.

  now: 1

• Kicker

  kicker · string

  Small letterspaced mono label hung off the row's left shoulder, e.g. 'Now generally available'. Two to four words; omit for a barer strip.

  now: Now generally available

• Rule

  rule · boolean

  Draw a hairline across the full frame width on the row's centre line. The chips knock a gutter out of it, so the row reads as sitting on the line rather than floating over it.

  now: true

• Shape

  shape · "pill" | "cut"

  'pill' rounds the chips to a full half-height radius. 'cut' uses the brand's own corner radius instead, which is what square-cornered brands like Press want.

  now: pill

• Brand

  brand · string

  Brand token id — one of the keys of BRANDS.

  now: slate