Badge with Text (Standard) for Vue

No variant is set, so it stays default: the theme's primary fill and primary text. The other values are secondary, outline, ghost, link, destructive, info, success and warning.

size takes sm, md or lg. pill rounds the badge fully. This demo sets neither, so you get the normal label.

The badge is whitespace-nowrap, so the label stays one line. Shorten the text. A sentence belongs in an Alert.

It is inline-flex and w-fit, so it hugs the label and stays on the line with a heading or a table cell. shrink-0 keeps it from being squashed in a tight row.

The badge is a span, so the label is read with the text around it. Use a word that still makes sense in that sentence.

Add background and text classes on Badge, including the dark pair, such as bg-blue-50 text-blue-700 and dark:bg-blue-950 dark:text-blue-300. Keep variant for meaning, such as destructive for an error.