Code

The badge component usage and API reference.

API

This component extends the native <div> API. That's why the className prop is not included in the table.

Props	Data Type	Required
children	string	✅
className	string	❌
color	grey | blue | green | yellow | red | indigo | purple | lime | teal | orange | pink	❌
iconBefore	AvailableTelicon	❌
iconAfter	AvailableTelicon	❌
isCounter	string	❌

Props description

children

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.

color

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

iconBefore

Collection of available icons to implement on the Badge component. This collection is based on the Telicon icon collection that can be found here. This would render the icon right before the children.

iconAfter

Collection of available icons to implement on the Badge component. This collection is based on the Telicon icon collection that can be found here. This would render the icon right after the children.

isCounter

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

If isCounter is true, icons are not going to be displayed on the component.

Example

Live Demo

Code Sandbox

https://codesandbox.io/p/sandbox/badge-5qr9ml?file=/src/App.tsx:1,1codesandbox.io