> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/badges/code.md).

# Code

The badge component usage and API reference.

## API

This component extends the native [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the `className` prop is not included in the table.

<table><thead><tr><th>Props</th><th width="399.66666666666663">Data Type</th><th>Required</th></tr></thead><tbody><tr><td><code>children</code></td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>color</code></td><td><code>grey | blue | green | yellow | red | indigo | purple | lime | teal | orange | pink</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>iconBefore</code></td><td><a href="https://2600hz.github.io/sds-telicon/"><code>AvailableTelicon</code></a></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>iconAfter</code></td><td><a href="https://2600hz.github.io/sds-telicon/"><code>AvailableTelicon</code></a></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>isCounter</code></td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

### Props description

<details>

<summary>children</summary>

In this case, the `children` of the Badge component is just a plain text string, which means it's not any kind of HTML or JSX code. It's just a simple message that we want to show on the Badge.

</details>

<details>

<summary>color</summary>

Collection of available colors to implement on the `Badge` component (Check the table above).

</details>

<details>

<summary>iconBefore</summary>

Collection of available icons to implement on the `Badge` component. This collection is based on the Telicon icon collection that can be found [here](https://2600hz.github.io/sds-telicon/).  This would render the icon right before the children.&#x20;

</details>

<details>

<summary>iconAfter</summary>

Collection of available icons to implement on the `Badge` component. This collection is based on the Telicon icon collection that can be found [here](https://2600hz.github.io/sds-telicon/).  This would render the icon right after the children.&#x20;

</details>

<details>

<summary>isCounter</summary>

Property that, if it has a `true` value, it will implement style changes on the `Badge` component.

</details>

{% hint style="warning" %}
If `isCounter` is `true`,  icons are not going to be displayed on the component.
{% endhint %}

## Example

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td>Live Demo</td><td><a href="https://codesandbox.io/s/badge-6fjr8j">Code Sandbox</a></td><td></td></tr></tbody></table>

{% embed url="<https://codesandbox.io/p/sandbox/badge-5qr9ml?file=/src/App.tsx:1,1>" fullWidth="true" %}