Badge

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

Under Construction

This component is currently being built. Check back soon for updates!

Preview

Code

Badge

Installation

CLI

Manual

Copy and paste the following code into your project.

import type { VariantProps } from "~/lib/cva";
import { BadgeStyles } from "./styles";
 
export interface BadgeProps
  extends React.ComponentProps<"div">,
    VariantProps<typeof BadgeStyles> {}
 
export function Badge({ className, variant, ...props }: BadgeProps) {
  return <div {...props} className={BadgeStyles({ className, variant })} />;
}

Update the import paths to match your project setup.

Usage

import { Badge } from "~/components/ui/badge";

<Badge variant="outline">Badge</Badge>

Link

You can use the BadgeStyles helper to create a link that looks like a badge.

import { BadgeStyles } from "~/components/ui/badge";

<Link className={BadgeStyles({ variant: "outline" })}>Badge</Link>

Examples

Default

Preview

Code

Badge

Secondary

Preview

Code

Secondary

Outline

Preview

Code

Outline

Danger

Preview

Code

Danger

API Reference

Prop	Type	Default
`variant`	`enum`	`"default"`

Avatar Breadcrumb

On This Page

Installation
Usage
- Link
Examples
API Reference

Contribute