Fusion UI

Overview

A Badge is a small dot or counter on another element. With a label and without showLabel, the label appears on hover.

Simple Badge:

123

456

Badge without Label (children):

Hovered Badge:

789

789493284332

"use client";

import {Badge} from "@brynlabs/fusion-ui";
import React from "react";

export const BadgeExample = () => (
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "start",
      gap: "10px",
    }}>
    <div style={{display: "flex", alignItems: "center", gap: "10px"}}>
      Simple Badge:
      <Badge>123</Badge>
      <Badge style={"success"}>456</Badge>
    </div>
    <div style={{display: "flex", alignItems: "center", gap: "10px"}}>
      Badge without Label (children):
      <Badge showLabel={false} style={"warn"}></Badge>
      <Badge showLabel={false} style={"critical"}></Badge>
    </div>
    <div style={{display: "flex", alignItems: "center", gap: "10px"}}>
      Hovered Badge:
      <Badge showLabel={false} style={"success"}>
        789
      </Badge>
      <Badge showLabel={false}>789493284332</Badge>
    </div>
  </div>
);

Playground

505

showLabel

import { Badge } from "@brynlabs/fusion-ui"

<Badge
  style={"primary"}
  showLabel={true}>
</Badge>