Verify Badge

A versatile verified badge component that can be customized with various styles (blue, gold, dark, gray), sizes, and an optional subtle pulse animation for premium aesthetics.

It includes distinct customization options to match different areas of your application.

Explore the different variations of the Verify Badge — each example shows a live preview with the exact code to copy. Hover a badge to see its shine effect.

Verify Badge

A verified marker sitting beside a display name.

color: is the badge fill — any hex or CSS colour. Defaults to the theme primary.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Verify Badge

npx shadcn@latest add @algorize-ui/verify-badge

components/custom/blocks/VerifyBadgeBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Verify Badge needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Sizes

Usesize: to scale the badge and its icon together — sm, md, lg or xl.

Static

Setanimate{false}: to drop the pulse for dense lists. It is off by default, so a row of badges stays calm unless you opt in.

In context

size"sm": is usually right inline with a name — the badge should not outweigh the text it verifies.

Features

Explore the Verify Badge's authentic design features, providing recognizable trust signals with subtle animated glows.

SVG Based

Uses standard SVG elements that scale perfectly to any size without losing quality.

Custom Themes

Easily pass any custom hex color or use predefined themes to match your branding.

Micro-Animations

Built-in optional subtle pulse animations to draw attention to verified status.

Flexible Sizing

Comes with 4 preset sizes (sm, md, lg, xl) that integrate seamlessly into any layout.

Best Practices & Guidelines

Accessibility First

Always ensure that you add an aria-label or title to the badge so that screen readers can convey the "Verified" status to visually impaired users.

Proper Sizing

Use the sm or md sizes when placing the badge directly next to standard text (like usernames). The lg and xl sizes are best reserved for profile headers or prominent display cards.

Props Reference

Component	Prop	Type	Default	Description
`VerifyBadge`	`color`	`string (hex/css color)`	`"var(--primary)"`	The theme color of the badge.
`VerifyBadge`	`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	The physical dimensions and icon size of the badge.
`VerifyBadge`	`animate`	`boolean`	`false`	If true, adds a continuous subtle pulse animation to the background.
`VerifyBadge`	`...props`	`HTMLAttributes<HTMLDivElement>`	`undefined`	Accepts all native HTML div attributes (e.g., `className`, `id`) which are seamlessly forwarded to the root wrapper.