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.
By default a short brand-to-accent beam travels slowly round the badge's edge, and faster while it is hovered. It stops under reduced motion. Set effect to false for a static badge.
Badges can contain custom content using children instead of the title prop.
as="span" renders the badge, and its arrow, as spans that flow inline, so it can sit inside a paragraph without breaking the HTML.