Sticker

Stickers label the thing beside them with a status, a category or a state, in a 16px pill. The label is the only required part, and the only thing a reader can do to a sticker is dismiss it, where the product allows that.

A sticker with neither children nor an icon logs a warning and returns null; a sticker with an icon and no children logs a second warning unless it also has an aria-label. Both checks are in the component, so an unlabeled sticker fails in the console rather than on the page, where it would look like a stray dot of color.

Use a sticker for a fact about a neighboring item that the item’s own text does not already say: “Failed” on a run, “Draft” on a record, “Sandbox” on an environment. Place it against the title, row or section it belongs to — a sticker floating between two rows describes neither.

For a count with no word, use a Badge. For a longer explanation use a Tooltip or inline text, and for something to do use a Button; a sticker’s only action is its own removal.

Stacked stickers need a gap between them. Back to back, two pills of similar color read as one label with a seam in it.

variant takes eleven color names — white, blue, teal, green, yellow, orange, pink, red, purple, darkGrey, grey — and, separately, the theme’s own variant names. Several of those resolve to a color already in the list: primary paints the same swatch as purple, success as green, caution as yellow, danger as pink, and basic as grey.

Two stickers written with different variants can therefore be the same sticker. The props table above cannot list any of this, because the type is an alias PDS does not resolve for the generator; the list here is read from the component’s own color map.

None of the eleven colors carries a meaning the system defines, which is why the label is what says what the sticker means. Red and green are the two readers will guess at, and they will guess wrong as often as a product invents a different convention.

onDismiss is what draws the X, and passing it is a promise: the reader now believes this sticker can be got rid of. Filters and self-applied tags can be. A record’s status cannot, and an X on one is an offer the product has to refuse.

PDS labels that button aria-label="Remove" on its own, which tells a screen reader that something can be removed but not what. dismissButtonProps is where you replace it: an aria-label of “Remove Active filter” names the thing, and in a list of six stickers it is the only way to tell the six buttons apart.

That prop is the only handle on the button PDS renders, so anything else it needs goes through it as well.

The dismiss button draws its focus ring as a 1px shadow in --background-color-behind-sticker, a variable declared as white. On a grey panel or a colored surface that ring is a white line against the wrong color, and the component’s own source says so where it sets it. Set the variable to whatever is actually behind the sticker.

disabled greys the whole pill and disables the dismiss button with it, so a disabled sticker cannot be removed by mouse or keyboard.

The label sits on one line at a fixed 16px height and truncates with an ellipsis rather than wrapping, so a long label is not a taller sticker — it is a shortened one. “Verification failed” arrives as “Verification fai…” in a narrow column, and the word that carried the meaning is the one that went.

isRequired adds a red asterisk that is excluded from that truncation, so the asterisk survives where the last word of the label does not.

Writing covers capitalization and punctuation.