Badge - React

Badges are used to highlight a relevant piece of information, like status or category.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

React

AndroidElementsiOSReactVue

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	Description
as	string	div	The DOM element to emit
variant	'neutral', 'info', 'positive', 'warning', 'negative', 'disabled', 'price', 'sponsored'	'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

Questions?

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