Use a badge for meaningful secondary information
A badge can identify a category, status, or count without taking attention away from the main content. Its meaning should be understandable in words. A green dot alone does not explain whether something is saved, available, or approved.
Use the generator to establish the appearance, then adapt the exported markup and styles to your application. A preview demonstrates the visual treatment; it does not certify your final interaction. Check the implementation with real content, a narrow screen, and keyboard input before publishing.
Try the component in the code editor →