Warp Design System

Appearance

Badge - Elements ​

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

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Accessibility ​

Badge renders slotted text as regular content. It does not add an ARIA role and it is not announced as a live region.

Use Meaningful Text ​

Do not rely on color alone to communicate meaning. The badge text should describe the status or metadata by itself.

html
<w-badge variant="positive">Approved</w-badge>
<w-badge variant="negative">Rejected</w-badge>

Avoid labels that only make sense visually:

html
<!-- Avoid -->
<w-badge variant="positive">Green</w-badge>

Keep Badges Non-Interactive ​

Do not place interactive elements inside w-badge. If the user can click, dismiss, filter, or select the item, use an interactive component instead.

The disabled variant is visual only. It does not disable related controls or remove anything from the tab order.

html
<!-- Avoid -->
<w-badge>
  <button type="button">New</button>
</w-badge>

Dynamic Changes ​

If a badge value changes after the page has loaded and users need to be notified, announce that change outside the badge with an appropriate live region or use Alert for important feedback.

Duplicate or Decorative Badges ​

If the same information is already available in nearby accessible text and the badge is only a visual duplicate, hide the duplicate badge from assistive technologies.

html
<p>Sponsored listing</p>
<w-badge aria-hidden="true" variant="sponsored">Sponsored</w-badge>

Usage ​

Badge is a compact, non-interactive label for short metadata such as status, category, count, price, or sponsorship information.

Use a badge when the label supports nearby content and does not require user interaction.

Basic Badge ​

html
<w-badge>New</w-badge>

Variants ​

Choose a variant that matches the meaning of the badge text:

  • neutral: default metadata or low-emphasis labels
  • info: informational labels
  • positive: successful, active, or approved states
  • warning: cautionary states
  • negative: error, blocked, or rejected states
  • disabled: unavailable or inactive states
  • price: price labels, especially when placed over media
  • sponsored: sponsored or commercial labels
html
<w-badge variant="neutral">Neutral</w-badge>
<w-badge variant="info">Info</w-badge>
<w-badge variant="positive">Approved</w-badge>
<w-badge variant="warning">Pending</w-badge>
<w-badge variant="negative">Rejected</w-badge>
<w-badge variant="disabled">Unavailable</w-badge>
<w-badge variant="price">1 200 kr</w-badge>
<w-badge variant="sponsored">Sponsored</w-badge>

If variant is omitted, the badge uses the neutral visual treatment.

Positioned Badges ​

Use position when a badge should sit in a corner of a parent element, such as a media thumbnail or listing image. The parent element should establish the positioning context with position: relative.

Supported positions are top-left, top-right, bottom-right, and bottom-left.

html
<div style="position: relative;">
  <img src="listing.jpg" alt="Living room with large windows" />
  <w-badge variant="price" position="top-right">1 200 kr</w-badge>
</div>

Content Guidelines ​

Keep badge text short and descriptive. Avoid using badges for full messages, instructions, or actions. Use Alert for important feedback messages and an interactive component, such as a button or link, when the user can act on the item.

Examples ​

Basic ​

html
<w-badge>New</w-badge>

Status Variants ​

html
<w-badge variant="neutral">Neutral</w-badge>
<w-badge variant="info">Info</w-badge>
<w-badge variant="positive">Approved</w-badge>
<w-badge variant="warning">Pending</w-badge>
<w-badge variant="negative">Rejected</w-badge>
<w-badge variant="disabled">Unavailable</w-badge>

Price ​

html
<w-badge variant="price">1 200 kr</w-badge>
html
<w-badge variant="sponsored">Sponsored</w-badge>

Positioned ​

html
<div style="position: relative; width: 220px; height: 124px; border-radius: 8px; overflow: hidden; background: #e5e7eb;">
  <w-badge variant="price" position="top-right">1 200 kr</w-badge>
</div>

Positioned Sponsored Badge ​

html
<div style="position: relative; width: 220px; height: 124px; border-radius: 8px; overflow: hidden; background: #e5e7eb;">
  <w-badge variant="sponsored" position="bottom-left">Sponsored</w-badge>
</div>

Styling API ​

<w-badge> API ​

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

Properties ​

NameTypeDefaultSummary
position'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'-Positions the badge in a corner of a parent element.
variant'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'-Controls the badge color treatment.

Property Details ​

position ​

Positions the badge in a corner of a parent element. Use this with a parent element that has position: relative. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner. Use this with a parent element that has position: relative. Accepted values are top-left, top-right, bottom-right, and bottom-left.

  • Type: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'
  • Default: -

variant ​

Controls the badge color treatment. If omitted, the badge uses neutral styling without reflecting a variant attribute. Accepted values are neutral, info, positive, warning, negative, disabled, price, and sponsored. If omitted, the badge uses neutral styling without reflecting a variant attribute.

  • Type: 'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'
  • Default: -

Questions? ​

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