<!-- AUTO-GENERATED by packages/components/bin/generate-skill-component-catalog.js. Do not edit by hand. -->

# r-badge

Informational element used to indicate the status of an object or action.

Example
```
<r-badge variant="information">Info</r-badge>
<r-badge variant="success" icon-visible>Completed</r-badge>
```

## class: `RBadge`, `r-badge`

### Fields

| Name            | Privacy | Type                                                 | Default | Description                                                              | Inherited From |
| --------------- | ------- | ---------------------------------------------------- | ------- | ------------------------------------------------------------------------ | -------------- |
| `iconAriaLabel` |         | `string`                                             |         | Defines an accessible name for the icon                                  |                |
| `iconVisible`   |         | `boolean`                                            | `false` | Defines if badge icon should be visible                                  |                |
| `variant`       |         | `"error" \| "information" \| "success" \| "warning"` |         | Variant defines how the component will be presented in UI,<br>optional. |                |

### Attributes

| Name              | Field         | Inherited From |
| ----------------- | ------------- | -------------- |
| `icon-aria-label` | iconAriaLabel |                |
| `icon-visible`    | iconVisible   |                |
| `variant`         | variant       |                |

### CSS Parts

| Name      | Description        |
| --------- | ------------------ |
| `base`    | The root container |
| `content` | Text container     |
| `icon`    | Icon container     |

### Slots

| Name   | Description                                                                      |
| ------ | -------------------------------------------------------------------------------- |
|        | Badge label text                                                                 |
| `icon` | Custom icon placed in the leading icon area (overrides the built-in status icon) |

<hr/>

## Exports

| Kind                        | Name      | Declaration | Module | Package |
| --------------------------- | --------- | ----------- | ------ | ------- |
| `js`                        | `RBadge`  | RBadge      |        |         |
| `custom-element-definition` | `r-badge` | RBadge      |        |         |