#Badge

The status chip the rest of the family is built from — reach for the dedicated component when one exists (HttpMethod, ResponseCode, Ip, Country) rather than rebuilding it here, and for Tag when the chip is interactive. Colour carries the meaning, so choose it from what the value is rather than from what looks right on the page.

Source · Storybook

#Usage

import { Badge } from '@wallarm-org/design-system/Badge';

#Examples

#Dotted

A leading dot in the current colour, for a status that reads faster as a mark than as a fill.

#Sizes

Two heights. medium exists for dense rows; anything smaller stops being legible at a glance, which is the only thing a badge is for.

#Types

The emphasis ladder from solid down to text. Drop the emphasis when badges are everywhere — a table of solid chips is a table nobody can scan.

#Text variants

text and text-color, the two flattest types. They suit a value that must be read but should not compete with the row it sits in.

#With icons left

An icon before the label, which is how a status reads without relying on colour alone.

#With icons right

An icon after the label, for a mark about the value rather than the value's own state.

#Icons only

No label at all. Only safe where the icon's meaning is already established elsewhere on the page, since nothing here names it.

#Muted variants

muted drops the saturation for a status that is true but not worth attention — the case for everything that is merely fine.

#Muted outline

A quieter outline keeps its neutral label and border inside a coloured message.

#Color variants

The full palette. Every colour already means something in the system, so borrowing one for decoration teaches the reader the wrong thing.

#Content variants

What happens as the content grows. A badge does not truncate, so long text widens the row rather than being cut.

#Props