Badge

A badge component that displays a label.

Installation

Copy the following code into your app directory.

buridan add component badge

Usage

Make sure to correctly set your imports relative to the component.

from components.base_ui.badge import badge

Examples

Below are examples demonstrating how the component can be used.

Default

Displays a standard badge using the default variant, ideal for basic labeling.

With Icons

Demonstrates how to include icons inside badges for visual context or emphasis.

Status

Showcases how badges can represent different statuses, like success or error, using color.

Notification Count

Illustrates how to use badges for showing counts, such as unread notifications or messages.