UI

Badge

Badges highlight information.

DefaultNeutralSuccessWarningError

Installation

  1. 1

    Install dependencies:

    npm install tailwind-variants
  2. 2

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor Badge [v0.0.1]
    import React from "react"import { tv, type VariantProps } from "tailwind-variants"
    import { cx } from "@/lib/utils"
    const badgeVariants = tv({  base: cx(    "inline-flex items-center gap-x-1 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset",  ),  variants: {    variant: {      default: [        "bg-blue-50 text-blue-900 ring-blue-500/30",        "dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30",      ],      neutral: [        "bg-gray-50 text-gray-900 ring-gray-500/30",        "dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20",      ],      success: [        "bg-emerald-50 text-emerald-900 ring-emerald-600/30",        "dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/20",      ],      error: [        "bg-red-50 text-red-900 ring-red-600/20",        "dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20",      ],      warning: [        "bg-yellow-50 text-yellow-900 ring-yellow-600/30",        "dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/20",      ],    },  },  defaultVariants: {    variant: "default",  },})
    interface BadgeProps  extends React.ComponentPropsWithoutRef<"span">,    VariantProps<typeof badgeVariants> {}
    const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(  ({ className, variant, ...props }: BadgeProps, forwardedRef) => {    return (      <span        ref={forwardedRef}        className={cx(badgeVariants({ variant }), className)}        tremor-id="tremor-raw"        {...props}      />    )  },)
    Badge.displayName = "Badge"
    export { Badge, badgeVariants, type BadgeProps }
    

Example: Customized badge

To customise the badge, use the className attribute.

Export RequestYour export is ready for download: 263 transactions

Example: Anchor with badgeVariants style

We can use the created badge styles to style any other component like the badges. Here we apply the badgeVariants to an anchor element.

API Reference: Badge

This component is based on the span element and supports all of its props.

variant
"default" | "neutral" | "success" | "error" | "warning"
Set a predefined look.

Default: "default"