Warp Design System

Appearance

Badge - Styling ​

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

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Layout and spacing ​

Even though the badge is implemented as a slot (container), the spacing between its elements should always follow the specifications defined below. Respecting these measurements ensures consistent alignment, readability, and visual balance across all use cases.

Badge component with an icon on the left and text label, demonstrating spacing: 8px padding above and 4px padding on the left, right, and bottom.

Measurements:

  • Padding-left: 8px
  • Padding-top: 4px
  • Padding-right: s8px
  • Padding-bottom: 4px
  • Gap: 4px

Questions? ​

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