Badge Group

Combine multiple badges into a single image with shared rounded edges and separator lines between segments — styled like a shadcn ButtonGroup.

URL format

Join multiple badge paths with + under the /group/ prefix:

/group/{badge1}+{badge2}+{badge3}.svg

Each segment is a normal badge endpoint path — npm/react, github/stars/vercel/next.js, etc. Query parameters apply to all segments.

Quick examples

![group](https://shieldcn.dev/group/npm/react+github/stars/vercel/next.js.svg)

![group](https://shieldcn.dev/group/npm/react+github/stars/vercel/next.js+github/license/vercel/next.js.svg?variant=branded)

![group](https://shieldcn.dev/group/github/stars/vercel/next.js+github/forks/vercel/next.js+github/license/vercel/next.js.svg?variant=outline)

How it works

• Each segment fetches data from its provider independently (in parallel)
• Icons are resolved per-segment using the provider's default icon
• For branded variant, each segment uses its own provider brand color
• The outer corners are rounded; inner edges are flat with a 1px separator line
• All query parameters (variant, size, mode, theme, font) apply to every segment

Limitations

• Per-segment query overrides (different variant per segment) are not supported — use query params for the whole group
• Maximum recommended: 5 segments (beyond that the badge gets very wide)
• split mode is not supported inside groups
• gradient is not supported on groups

Data source

Each segment fetches from its respective provider. No additional API calls.