Components
For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
Compact status labels with solid and dot appearances.
Use the variant prop to change the base styling of the badge.
You can render an icon inside the badge. Ensure icons use the correct styling or sizing.
Display a loading state inside the badge using a spinner icon.
By default, badges use rounded-none to follow the structural design system. However, you can explicitly set shape="pill" to render a fully rounded pill badge.
Use the asChild prop to render a link (or any other element) as a badge.
Use the size="icon" prop for notification bubbles, or size="sm" for compact spaces. These are the only badges that use rounded-full to stand out.
The Badge component accepts the following props: