Merchant badgePro

Who you are buying from, small enough for a sentence, with verification, the real site and policy links.

Markdown

On this page

ProTwo sellers in one answer, one verified and one a lookalike: open each badge to see who is behind it.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/merchant-badge

Usage

tsx

import { MerchantBadge } from "@/components/ui/chatcn/pro/merchant-badge"

<p>
  The Tarn 22 L is $138 at{" "}
  <MerchantBadge
    name="Northfold Supply"
    domain="shop.northfold.co"
    trust="verified"
    verifiedBy="the Merchant Registry"
    since="2014"
    rating={4.7}
    reviewCount={12040}
    policies={[{ label: "Returns", href: "/returns" }]}
  />
</p>

Inline, the badge carries the store's mark (yours, or a monogram), the name and a check that means its identity was confirmed; it opens a popover with the full card. The site shows the part someone had to register in full ink and everything around it in gray, so shop.northfold.co and northfold-outlet.shop read differently at a glance. trust is verified, unverified (a quiet shield and advice to pay with buyer protection) or warning, which turns the badge into a plain Check this store and puts your warning text behind a red rule. layout="card" renders the card on its own.

Examples

States

ProNot verified, a lookalike site, badges inside text, name only.

Props

Prop	Type	Notes
`name`, `domain`, `logo`	`string`, `string`, `ReactNode`	Identity
`trust`	`"verified" \| "unverified" \| "warning"`	Default `unverified`
`verifiedBy`, `since`	`string`	Who checked it and since when
`warning`	`ReactNode`	What is wrong, for `warning`
`rating`, `reviewCount`	`number`	Stars out of 5
`facts`	`{ label, value }[]`	Ships from, returns, support
`policies`	`{ label, href }[]`	Links, opened in a new tab
`layout`	`"inline" \| "card"`	Default `inline`
`locale`	`string`	Review count formatting
`labels`	`Partial<MerchantBadgeLabels>`	Every string, for translation

Keyboard

Key	Action
Tab	The badge, then the policy links inside the open card
Enter or Space	Open the card
Escape	Close it and return focus to the badge

Accessibility

The badge is a button named About and the store, with its trust state in words.
The trust icon is never alone: verified, not verified and the warning are spoken.
The site is read as Secure connection, Site, then the full host.
Policies are a navigation landmark of plain links named by the policy.

Motion

The card opens from the badge in 180 ms with the kit popover. Reduced motion keeps the fade only.