Badge

Welcome to the documentation for the "Badge" component in the Baka UI Library. The "Badge" component is a small, self-contained element used to display numerical or status information.

terminal
code

Introduction

The "Badge" component is a simple but versatile element that can be used to display various types of information. Whether you need to show a count, a status indicator, or any other numerical value, the "Badge" component has you covered.

Usage

To use the "Badge" component, import it from baka-ui and include it in your JSX code. Here's a basic example:

import { BakaBadge } from "baka-ui";

// Inside your component:
<BakaBadge>3</BakaBadge>

Variants

The "Badge" component offers different variants to suit your specific needs:

  • Self-container: A badge without any content.
  • Single-digit: A badge designed to display a single-digit number.
  • Multi-digit: A badge capable of displaying multiple digits.

Constructed Badge

You can also create a "Badge" by using the "BakaText" component within the "BakaBadge" component. This allows you to include additional content alongside the badge, making it more informative.

import { BakaBadge, BakaText } from "baka-ui";

// Constructed Badge examples:
<BakaBadge variant={"single-digit"}>
  <BakaText>3</BakaText>
</BakaBadge>
<BakaBadge variant={"multi-digit"}>
  <BakaText>32</BakaText>
</BakaBadge>

Usage Guidelines

When using the "Badge" component, consider the following guidelines:

  • Self-container Badge: Use the self-container badge when you only need a simple visual indicator without additional content.
  • Single-digit and Multi-digit Badges: Choose the appropriate variant based on the expected content. Single-digit badges are ideal for displaying single-digit numbers, while multi-digit badges are suitable for longer numbers.
  • Constructed Badges: If you need to provide additional context or content alongside the badge, use the constructed badge with the "BakaText" component.

Real-World Examples

Here are some real-world examples of using different "Badge" variants:

Notification Count

You can use a single-digit badge to display the count of unread notifications.

<BakaBadge variant={"single-digit"}>3</BakaBadge>

Message Count

For situations where you need to display a larger count, such as the number of messages in a chat, you can use a multi-digit badge.

<BakaBadge variant={"multi-digit"}>32</BakaBadge>

Constructed Badge with BakaText

In cases where you want to provide additional information alongside the badge, you can use a constructed badge with the "BakaText" component.

<BakaBadge variant={"single-digit"}>
  <BakaText>New</BakaText>
</BakaBadge>

The "Badge" component is a versatile tool for adding numerical or status indicators to your user interface, helping to enhance user experience and provide valuable information at a glance.