Verified Badge

X-style verified badge with shimmer or static variants.

Installation

npx shadcn@latest add @iconiq/verified-badge

File Structure

Usage

"use client";

import { VerifiedBadge } from "@/components/ui/verified-badge";

export function VerifiedBadgePreview() {
  return (
    <span className="inline-flex items-center gap-1.5">
      <span className="font-semibold text-foreground text-xl tracking-tight">
        Iconiq UI
      </span>
      <VerifiedBadge className="translate-y-px" />
    </span>
  );
}

Props

Props
Description

VerifiedBadge

variant

Use `shimmer` for a sweeping highlight across the scallop or `static` for a fixed badge.

Type "shimmer" | "static"·Default shimmer

size

Preset sizes map to 18px, 22px, and 28px. Pass a number for an explicit pixel width and height.

Type "sm" | "md" | "lg" | number·Default md

tone

Brand uses `--verified-badge-color` (defaults to `--ic-brand`). Gold and neutral provide alternate trust-indicator palettes.

Type "brand" | "gold" | "neutral"·Default brand

decorative

When true, hides the badge from assistive tech. Use when visible copy already announces verification.

Type boolean·Default false

className

Merged onto the root span. Pass a `text-*` class to override the tone color.

Type string

aria-label

Announced to screen readers when `decorative` is false. Override when the badge conveys a different status.

Type string·Default Verified

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Iconiq UI