Badge

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

ATSFreeNew

Loading…

"use client"

import { Badge } from "@/components/ui/badge"

export default function BadgeDemo() {
  return (
    <div className="flex w-full flex-wrap items-center justify-center gap-2">
      <Badge variant="success" size="brand">
        ATS
      </Badge>
      <Badge variant="grey" size="brand">
        Free
      </Badge>
      <Badge variant="coral" size="brand">
        New
      </Badge>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @kickresume/badge

Usage

import { Badge } from "@/components/ui/badge"

<div className="flex w-full flex-wrap items-center justify-center gap-2">
  <Badge variant="success" size="brand">
    ATS
  </Badge>
  <Badge variant="grey" size="brand">
    Free
  </Badge>
  <Badge variant="coral" size="brand">
    New
  </Badge>
</div>

Examples

Variants

Use the variant prop to change the variant of the badge.

DefaultSecondaryDestructiveOutlineGhostSuccessGreyFreePremium

Loading…

"use client"

import { Badge } from "@/components/ui/badge"

export default function BadgeVariants() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="ghost">Ghost</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="grey">Grey</Badge>
      <Badge variant="free">Free</Badge>
      <Badge variant="premium">Premium</Badge>
    </div>
  )
}

With Icon

You can render an icon inside the badge. Place the icon before or after the label — the badge spaces its children automatically with gap.

VerifiedBookmark

Loading…

"use client"

import { BadgeCheck, BookmarkIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"

export default function BadgeIcon() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="secondary">
        <BadgeCheck data-icon="inline-start" />
        Verified
      </Badge>
      <Badge variant="outline">
        Bookmark
        <BookmarkIcon data-icon="inline-end" />
      </Badge>
    </div>
  )
}

With Spinner

You can render a spinner inside the badge to show a loading state. The badge sizes any icon without an explicit size-* class to size-3.5 automatically, so the spinner needs no extra classes.

GeneratingProcessing

Loading…

"use client"

import { Badge } from "@/components/ui/badge"
import { Spinner } from "@/components/ui/spinner"

export default function BadgeSpinner() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="secondary">
        <Spinner data-icon="inline-start" />
        Generating
      </Badge>
      <Badge variant="secondary">
        Processing
        <Spinner data-icon="inline-end" />
      </Badge>
    </div>
  )
}

Link

Use the render prop to render the badge as a link.

Open Link

Loading…

"use client"

import { ArrowUpRightIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"

export default function BadgeLink() {
  return (
    <Badge render={<a href="#link" />}>
      Open Link
      <ArrowUpRightIcon data-icon="inline-end" />
    </Badge>
  )
}

Brand Colors

Use the brand color variants for Kickresume's canonical colors: coral renders the primary coral, success the apple green (--kr-green-apple), grey and free the neutral grey (--kr-grey), and premium the premium gradient.

CoralGreenGreyPremium

Loading…

"use client"

import { Badge } from "@/components/ui/badge"

export default function BadgeColors() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="coral">Coral</Badge>
      <Badge variant="success">Green</Badge>
      <Badge variant="grey">Grey</Badge>
      <Badge variant="premium">Premium</Badge>
    </div>
  )
}

API Reference

Badge

The Badge component displays a badge or a component that looks like a badge.

Prop	Type	Default
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link" \| "coral" \| "grey" \| "success" \| "premium" \| "free"`	`"default"`
`size`	`"default" \| "sm" \| "brand"`	`"default"`
`render`	`ReactElement \| RenderFunction`	-
`className`	`string`	-