dotUI
dotUI
beta
  1. Components
  2. Data display
  3. Badge

Badge

Displays a badge or a component that looks like a badge.

import { Badge } from "@/lib/components/core/default/badge";

function BadgeDemo() {
  return <Badge>Badge</Badge>;
}

Installation

Copy and paste the following code into your project.

import * as React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils/classes";

const badgeVariants = tv({
  base: "inline-flex items-center gap-1 rounded-md text-xs font-semibold transition-colors shrink-0 whitespace-nowrap",
  variants: {
    variant: {
      neutral: "bg-bg-muted text-fg",
      outline: "border text-fg",
      primary: "bg-bg-primary text-fg-onPrimary",
      success: "bg-bg-success text-fg-onSuccess",
      "success-subtle": "bg-bg-success-muted text-fg-success",
      "success-outline": "border border-border-success text-fg-success",
      danger: "bg-bg-danger text-fg-onDanger",
      "danger-subtle": "bg-bg-danger-muted text-fg-danger",
      "danger-outline": "border border-border-danger text-fg-danger",
      warning: "bg-bg-warning text-fg-onWarning",
      "warning-subtle": "bg-bg-warning-muted text-fg-warning",
      "warning-outline": "border border-border-warning text-fg-warning",
      accent: "bg-bg-accent text-fg-onAccent",
      "accent-subtle": "bg-bg-accent-muted text-fg-accent",
      "accent-outline": "border border-border-accent text-fg-accent",
    },
    size: {
      sm: "h-5 px-2.5 [&_svg]:size-3",
      md: "h-6 px-3 [&_svg]:size-3.5",
      lg: "h-7 px-4 text-sm [&_svg]:size-4",
    },
  },
  defaultVariants: {
    variant: "primary",
    size: "sm",
  },
});

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {
  icon?: React.ReactNode;
}

function Badge({ children, className, variant, size, icon, ...props }: BadgeProps) {
  return (
    <span
      role="presentation"
      className={cn(badgeVariants({ variant, size }), className)}
      {...props}
    >
      {icon && <span>{icon}</span>}
      <span>{children}</span>
    </span>
  );
}

export { Badge, badgeVariants };

Update the import paths to match your project setup.

Options

Variants

Use the variant prop to control the visual style of the Badge. The default variant is primary.

import { Badge } from "@/lib/components/core/default/badge";

function BadgeDemo() {
  return (
    <div className="flex flex-col items-start gap-2">
      <Flex>
        <Badge variant="neutral">Neutral</Badge>
        <Badge variant="outline">Outline</Badge>
        <Badge variant="primary">Primary</Badge>
      </Flex>
      <Flex>
        <Badge variant="success">Success</Badge>
        <Badge variant="success-subtle">Success Subtle</Badge>
        <Badge variant="success-outline">Success Outline</Badge>
      </Flex>
      <Flex>
        <Badge variant="danger">Danger</Badge>
        <Badge variant="danger-subtle">Danger Subtle</Badge>
        <Badge variant="danger-outline">Danger Outline</Badge>
      </Flex>
      <Flex>
        <Badge variant="warning">Warning</Badge>
        <Badge variant="warning-subtle">Warning Subtle</Badge>
        <Badge variant="warning-outline">Warning Outline</Badge>
      </Flex>
      <Flex>
        <Badge variant="accent">Accent</Badge>
        <Badge variant="accent-subtle">Accent Subtle</Badge>
        <Badge variant="accent-outline">Accent Outline</Badge>
      </Flex>
      <Flex></Flex>
    </div>
  );
}

const Flex = (props: React.HTMLAttributes<HTMLDivElement>) => (
  <div {...props} className="flex items-center gap-2" />
);

Sizes

Use the size prop to control the size of the Badge. The default variant is sm.

import { Badge } from "@/lib/components/core/default/badge";

function BadgeDemo() {
  return (
    <div className="flex items-center gap-2">
      <Badge variant="primary" size="sm">
        Small
      </Badge>
      <Badge variant="primary" size="md">
        Medium
      </Badge>
      <Badge variant="primary" size="lg">
        Large
      </Badge>
    </div>
  );
}

Icon

To add additional context for the Badge, use the icon prop to add an icon.

import { Badge } from "@/lib/components/core/default/badge";
import { ShieldIcon } from "@/lib/icons";

function BadgeDemo() {
  return (
    <div className="flex items-center gap-2">
      <Badge icon={<ShieldIcon />} size="sm">
        Badge
      </Badge>
      <Badge icon={<ShieldIcon />} size="md">
        Badge
      </Badge>
      <Badge icon={<ShieldIcon />} size="lg">
        Badge
      </Badge>
    </div>
  );
}

API Reference

Badge accepts all HTML span element props and the following:

PropTypeDefaultDescription
neutral
'outline' | 'primary | 'success' | 'success-subtle' | 'success-outline' | 'danger | 'danger-subtle' | 'danger-outline' | 'warning' | 'warning-subtle' | 'warning-outline' | 'accent' | 'accent-subtle' | 'accent-outline'
'primary'
The visual style of the badge.
size
"sm" | "md" | "lg"
'sm'
The size of the badge.
icon
React.ReactNode
-
An icon to display before the badge text.
dotUI
beta

Accessible, mobile friendly, modern UI components.

TwitterGitHub

Community

Built by mehdibha. The source code is available on GitHub.