Badge

A Badge is a small component that is typically used to display status information or additional context for another UI element.

Badge

Installation

Copy-Paste the component code in a .tsx file.

import { badge, type BadgeProps } from "@tailus/themer"

export interface BadgeVariantsProps extends React.HTMLAttributes<HTMLDivElement>, BadgeProps {}

export const Badge: React.FC<BadgeVariantsProps> = ({
    className,
    children,
    intent = "primary", 
    size = "md",
    variant = "soft",
    ...props
  }) => {
    return(
        <span className={badge[variant]({intent, size, className})} {...props}>
            {children}
        </span>
    )
}
  
Badge.displayName = "Badge";
export default Badge;

Usage

Import the Badge component and use it in your component.

import Badge from "@tailus-ui/Badge";
const MyComponent = () => (
    <Badge size="sm" intent="danger">Badge</Badge>
)

Reference

Props

The Badge component has the following props.

Prop
Type
Default
size
enum
sm
variant
enum
soft
intent
enum
primary

Examples

Colors

solid

primarysecondaryaccentinfodangerwarningsuccessgray

outlined

primarysecondaryaccentinfodangerwarningsuccessgray

soft

primarysecondaryaccentinfodangerwarningsuccessgray
 
import Badge from "@tailus-ui/Badge";
import { Caption } from "@components/typography";
import { type BadgeProps } from "@tailus/themer";

const intents:BadgeProps["intent"][] = ["primary", "secondary", "accent", "info", "danger", "warning", "success", "gray"]
const variants:BadgeProps["variant"][] = ["solid", "outlined", "soft"]

export const Intents = () => {
    return (
        <div className="grid grid-cols-3 gap-6 py-12 justify-center">
            {
                variants.map((variant, index) => (
                    <div key={index} className="space-y-4">
                        <Caption className="capitalize">{variant}</Caption>
                        {
                            intents.map((intent, index) => (
                                <Badge key={index} intent={intent} variant={variant} className="capitalize">
                                    {intent}
                                </Badge>
                            ))
                        }
                    </div>
                ))
            }
        </div>
    );
};

Sizes

xssmmdlg
xssmmdlg
xssmmdlg
 
import Badge from "@tailus-ui/Badge";
import { type BadgeProps } from "@tailus/themer";

const variants: BadgeProps["variant"][] = ["solid", "outlined", "soft"]
const sizes: BadgeProps["size"][] = ["xs", "sm", "md", "lg"]

export const Sizes = () => {
    return (
        <div className="grid gap-4">
            {
                variants.map((variant, index) => (
                    <div key={index} className="flex gap-4 items-end">
                        {
                            sizes.map((size, index) => (
                                <Badge key={index} intent="primary" variant={variant} size={size} className="capitalize">
                                    {size}
                                </Badge>
                            ))
                        }
                    </div>
                ))
            }
        </div>
    );
};