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

Select brand:

FinnTori

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

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

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', 'notification', 'price'	'neutral'	Variant of the badge
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