Badge

Choose between three different sizes for your badges with the size prop.

Add icons to badges with the icon and icon-trailing props.

Display badges with a fully rounded border radius using the variant="pill" prop.

Make the entire badge clickable by wrapping it in a button element.

Make a badge removable by appending a close button.

Choose from an array of colors to differentiate between badges and convey emotion.

Bold, high-contrast badges for more important status indicators or alerts.

If you're using badges alongside inline text, you might run into spacing issues because of the extra padding around the badge. Use the inset prop to add negative margins to the top and bottom of the badge to avoid this.