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:

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

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

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

Syntax

<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

name	type	default	notes
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