A versatile component for displaying highlighted information, labels, or interactive elements in a pill-shaped container. Commonly used to draw attention to important information or provide interactive links.
Add icons to badges to enhance visual communication.
Badges can be made interactive by adding the href prop, turning them into links.
Badges can be displayed without the arrow indicator by setting the arrow prop to false. If using multiple badges on a page, add custom id to each badge to ensure the arrow gets rendered.
Disable the hover animation effect by setting the effect prop to false.
Badges can contain custom content using children instead of the title prop.
