Tailwind CSS Badge

Highlight content with the badge component from the David UI components library.

Whether for notifications, labels, or status indicators, this Tailwind CSS-styled component is customizable to fit any theme.

See our examples to explore various sizes, colors, and configurations for versatile use.

Basic Badge

Start with this simple badge setup, featuring a notification button and a small indicator for displaying the number of notifications. The badge is interactive and can respond to user clicks.

5

Badge Colors

Choose from a variety of badge colors, including primary, secondary, info, success, warning, and error. Easily apply these colors to your badge by using the corresponding classes. The example below showcases the available options for integrating badge colors into your project.

5
5
5
5
5
5

Badge Placement

Discover how to position badges in various relative locations within a container. This example demonstrates flexible placement options to customize the badge layout to your design needs.

5
5
5
5

Badge Dot

Implement a simple badge with a color indicator instead of text. This style is ideal for subtle visual cues, such as highlighting a settings button or drawing attention to specific elements in the UI.

Badge Overlap

Learn how to effectively overlay badge indicators on UI elements. These examples demonstrate how badges can convey extra information or enhance visual aesthetics in your design.

5
profile-picture
5
profile-picture

Badge with Border

Use this bordered badge to notify users about unread messages, alerts, or other key updates. The indicator provides clear and concise visual feedback.

5

Badge Custom Styles

Incorporate a badge that represents completed or acknowledged states. Styled as a small circular badge, it features a black background, white border, shadow effects, and an SVG checkmark icon, symbolizing a positive or finished status.