---
title: React Badge Component Styling
name: Badge Styling
description: Learn how to customize the React Badge component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
route: /components/badge/
---

### CSS variables

React Badge supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

<ScssDocs file="_badge.scss" capture="badge-css-vars" />

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-avatar-font-size': '2rem',
  '--cui-avatar-color': '#f2f3f4',
}

return <CBadge style={customVars} />
```

### SASS variables

<ScssDocs file="_variables.scss" capture="badge-variables" />
