Warp Design System

Appearance

Badge ​

Badge is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.

React

released

Vue

released

Elements

released

Android

released

iOS

released

Example ​

Usage ​

Design Guidelines ​

See Figma: Warp - Components / Badge

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

Frameworks ​

Import ​

You can import the component like so:

js
import { Badge } from '@warp-ds/react';

or import it individually to optimize your JS bundle size by adding only the components you need:

js
import { Badge } from '@warp-ds/react/components/badge';

Syntax ​

jsx
<Badge>Default badge rendered as neutral variant</Badge>
<Badge variant="info">Info variant badge</Badge>
<Badge variant="price" position="top-left">Price badge with a top-left position</Badge>

Props ​

Optional Props

nametypedefaultnotes

as

string

div

The DOM element to emit

variant

'neutral', 'info', 'positive', 'warning', 'negative', 'disabled', 'price'

'neutral'

position

'top-left', 'top-right', 'bottom-right', 'bottom-left'

undefined

Used for absolute positioning of the badge within a container

children

Element | Element[] | string

Content of the Badge component

className

string

Additional CSS classes to apply to the component

style

CSSProperties

CSS styles to inline on the component