/>
MDX UI
$ init
Certification Badge

Certification Badge

Compliance certification display for ISO, TISAX, SOC 2, and similar standards

Installation

npx @ravikumarsurya/mdx-ui add certification-badge

Usage

import { CertificationBadge } from "@/components/mdx/certification-badge";
 
<CertificationBadge
  certs={[
    {
      name: "ISO 27001:2022",
      scope: "Information Security Management",
      year: 2023,
      status: "active",
    },
    {
      name: "TISAX",
      scope: "Automotive Information Security",
      year: 2024,
      status: "active",
    },
  ]}
/>;

Examples

ISO 27001:2022

Information Security Management

2023·Active
SOC 2 Type II

Trust Services Criteria

Pending
GDPR

Data Protection Compliance

2021·Expired

Active certifications

<CertificationBadge
  certs={[
    {
      name: "ISO 27001:2022",
      scope: "Information Security Management",
      year: 2023,
      status: "active",
    },
    {
      name: "TISAX",
      scope: "Automotive Information Security",
      year: 2024,
      status: "active",
    },
    {
      name: "SOC 2 Type II",
      scope: "Trust Services Criteria",
      year: 2023,
      status: "active",
    },
  ]}
/>

Mixed statuses

<CertificationBadge
  certs={[
    { name: "ISO 27001:2022", status: "active" },
    { name: "ISO 9001:2015", status: "expired" },
    { name: "SOC 2 Type II", status: "pending" },
  ]}
/>

Minimal — name only

<CertificationBadge
  certs={[{ name: "GDPR" }, { name: "CCPA" }, { name: "ISO 27001" }]}
/>

Status reference

StatusIndicatorMeaning
activeGreen dotCurrently valid certification
pendingAmber dotAudit in progress, not yet awarded
expiredGrey dotCertification has lapsed

Props

CertificationBadge

PropTypeDefaultDescription
certsCertification[]—One or more certifications to display (required)
classNamestring—Additional CSS classes

Certification

FieldTypeDefaultDescription
namestring—Certification name, e.g. "ISO 27001:2022" (required)
scopestring—Scope or standard description
yearstring | number—Year awarded or last renewed
status"active" | "pending" | "expired""active"Current certification status
PreviousVideo
NextData Type Table