---
url: /docs/components/badge/styling.md
---
# Badge - Styling

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

## 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.

:::image-block
![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.](/components/badge/badge-style-measurements.svg)
:::

**Measurements:**

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