# salla-badge (https://docs.salla.dev/twilight/react/web-components/salla-badge)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A small rounded label for short content such as a status, a count or a points value.
Use it to highlight a short piece of text or an icon next to other content.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-badge>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaBadge } from '@salla.sa/twilight-components-react/badge';
```

## Try it [#try-it]

<Demo name="web-components/salla-badge" />

## Example [#example]

```tsx
import { SallaBadge } from '@salla.sa/twilight-components-react/badge';

export function Example() {
  return (
    <SallaBadge size="xs" bg="primary-100" color="primary-900">New</SallaBadge>
  );
}
```

```html
<salla-badge size="xs" bg="primary-100" color="primary-900">New</salla-badge>
```

## Properties [#properties]

| Property | Attribute | Description                       | Type                                        | Default   |
| -------- | --------- | --------------------------------- | ------------------------------------------- | --------- |
| `bg`     | `bg`      | The background color of the badge | `"light" \| "primary-100" \| "transparent"` | `'light'` |
| `color`  | `color`   | The text color of the badge       | `"black" \| "primary-900"`                  | `'black'` |
| `size`   | `size`    | The size of the badge             | `"md" \| "sm" \| "xs"`                      | `'sm'`    |

## Slots [#slots]

| Slot      | Description                                |
| --------- | ------------------------------------------ |
| (default) | The badge content (text, icons or markup). |

## Related [#related]

Used inside: [`<salla-loyalty-point>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-point), [`<salla-loyalty-reward>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-reward), [`<salla-reward-card>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-card), [`<salla-reward-details>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-details).