Devie UI
Primary
Outline
Danger
Success
Warning

The Badge component is a custom implementation designed to display labels, tags, or status indicators with various visual styles and variants.

Installation

Here is the component implementation code that you can copy to your project:

import clsx from "clsx";
import React from "react";
import styles from "./Badge.module.scss";
 
type BadgeVariant =
  | "primary"
  | "outline"
  | "danger"
  | "success"
  | "warning"
  | "litteralGray"
  | "litteralBrown"
  | "litteralOrange"
  | "litteralYellow"
  | "litteralGreen"
  | "litteralBlue"
  | "litteralPurple"
  | "litteralPink"
  | "litteralRed";
 
interface Props extends React.HTMLAttributes<HTMLDivElement> {
  variant?: BadgeVariant;
  as?: React.ElementType;
}
 
export default function Badge({
  variant = "outline",
  children,
  className,
  as: Component = "div",
  ...props
}: Props) {
  const badgeClassName = clsx(
    styles.badge,
    variant === "primary" && styles.primary,
    variant === "outline" && styles.outline,
    variant === "danger" && styles.danger,
    variant === "success" && styles.success,
    variant === "warning" && styles.warning,
    variant === "litteralGray" && styles.litteralGray,
    variant === "litteralBrown" && styles.litteralBrown,
    variant === "litteralOrange" && styles.litteralOrange,
    variant === "litteralYellow" && styles.litteralYellow,
    variant === "litteralGreen" && styles.litteralGreen,
    variant === "litteralBlue" && styles.litteralBlue,
    variant === "litteralPurple" && styles.litteralPurple,
    variant === "litteralPink" && styles.litteralPink,
    variant === "litteralRed" && styles.litteralRed,
    className,
  );
 
  return React.createElement(
    Component,
    {
      className: badgeClassName,
      ...props,
    },
    children,
  );
}

Use Cases

Basic Badge

A simple badge with the default outline variant.

Badge

Badge Variants

Badges come in different variants to convey different meanings: primary, outline, danger, success, and warning.

Primary
Outline
Danger
Success
Warning

Badge with Icons

It's possible to add icons from Lucide or any other icon library to enhance the badge's visual meaning.

Completed
Featured

Badge as Link

Badges can be made clickable by wrapping them in an anchor tag. Note: Badges only show hover effects when placed inside an anchor (<a>) tag. This helps maintain a clean interface while providing visual feedback for interactive badges.

Clickable Badge (hover me)
Regular Badge (no hover effect)