Badge - Elements

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

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Elements

AndroidElementsiOSReactVue

Example theme:

DBA lightFinn lightTori lightBlocket lightNeutral lightVend lightDBA darkFinn darkTori darkBlocket darkNeutral darkVend dark

Variants

Neutral

<w-badge variant="neutral">Badge text</w-badge>

Info

<w-badge variant="info">Badge text</w-badge>

Positive

<w-badge variant="positive">Badge text</w-badge>

Warning

<w-badge variant="warning">Badge text</w-badge>

Negative

<w-badge variant="negative">Badge text</w-badge>

Disabled

<w-badge variant="disabled">Badge text</w-badge>

Price

<w-badge variant="price">Badge text</w-badge>

Sponsored

<w-badge variant="sponsored">Badge text</w-badge>

Positioned

<div style="position: relative; width: 200px; height: 100px; background: #f0f0f0; border-radius: 8px; overflow: hidden;">
  <w-badge variant="price" position="top-right">Badge</w-badge>
</div>

Props

Optional Props

Name	Type	Default	Description
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

Questions?

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