@linked-claims/badge

LinkedTrust verified claim badge — a self-contained web component that renders verified claim badges from the LinkedTrust API.

Quick Start

Script Tag (CDN / Email)

<script src="https://demos.linkedtrust.us/embed/badge.js"></script>
<linked-badge claim-id="124419"></linked-badge>

Or use the bundled standalone file from the package:

<script src="node_modules/@linked-claims/badge/badge.js"></script>
<linked-badge claim-id="124419"></linked-badge>

NPM

npm install @linked-claims/badge

import '@linked-claims/badge'

<linked-badge claim-id="124419"></linked-badge>

Attributes

| Attribute | Type | Default | Description | | ---------- | -------- | -------------------------------- | ---------------------------------- | | claim-id | string | — | Numeric claim ID (required) | | layout | string | "card" | "card" (vertical) or "row" (horizontal) | | theme | string | "light" | "light" or "dark" | | compact | flag | — | Smaller variant when present | | api-base | string | https://live.linkedtrust.us | Override API base URL |

Layouts & Themes

<!-- Default card -->
<linked-badge claim-id="124419"></linked-badge>

<!-- Horizontal row -->
<linked-badge claim-id="124419" layout="row"></linked-badge>

<!-- Dark theme -->
<linked-badge claim-id="124419" theme="dark"></linked-badge>

<!-- Compact card -->
<linked-badge claim-id="124419" compact></linked-badge>

<!-- Dark compact row -->
<linked-badge claim-id="124419" layout="row" theme="dark" compact></linked-badge>

Framework Integration

React

import '@linked-claims/badge'

function ClaimBadge({ claimId }) {
  return <linked-badge claim-id={claimId} />
}

Vue

<script setup>
import '@linked-claims/badge'
</script>

<template>
  <linked-badge :claim-id="claimId" />
</template>

Svelte

<script>
  import '@linked-claims/badge'
  export let claimId
</script>

<linked-badge claim-id={claimId} />

TypeScript

The package includes type declarations. For JSX support in React:

import type { LinkedBadgeAttributes } from '@linked-claims/badge'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'linked-badge': LinkedBadgeAttributes
    }
  }
}

Email / Third-Party Embed

For email or third-party sites where npm isn't available, use the standalone script:

<script src="https://demos.linkedtrust.us/embed/badge.js"></script>
<linked-badge claim-id="124419"></linked-badge>

The standalone script is a self-contained IIFE with zero dependencies. It registers the <linked-badge> custom element and works in any modern browser.

License

MIT