WorkDS Docs Homepage

Badge

Displays a stylized badge element.

Badge

API Reference

PropTypeDefault
color"gray" | "purple" | "blue" | "green" | "yellow" | "red""gray"
highContrastboolean
size"1" | "2""1"

This component is based on the span element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Colors

Use the color prop to control the color of the badge.

GrayPurpleBlueGreenYellowRed

High contrast

Use the highContrast prop to control whether a higher contrast color combination is used.

GrayGray

Sizes

Use the size prop to control the size of the badge.

Size 1Size 2Size 2

With Code component

You can compose Badge together with the Code component.

HTTP

Use the following Badge colors and Code component to represent HTTP response codes:

200401500

Use the following Badge colors and Code component to represent HTTP request methods:

GETPOSTPUTDELETE