Skill Badge

Displays a skill.

html

<span class="skillbadge skillbadge--proficient" style="--c:#A8E6C1;font-size:13px;">
  TypeScript
  <svg class="skillbadge__check" viewBox="0 0 12 12" width="12" height="12" aria-hidden="true"><path d="M2 6.5l2.5 2.5L10 3"/></svg>
</span>
<style>
.skillbadge { display: inline-flex; align-items: center; gap: 5px; font: 600 1em system-ui, sans-serif; padding: .35em .8em; border-radius: 999px; border: 1.5px solid var(--c); color: #241430; }
.skillbadge--beginner { background: transparent; }
.skillbadge--proficient { background: color-mix(in srgb, var(--c) 30%, #FAF7F2); }
.skillbadge--expert { background: var(--c); }
.skillbadge__check { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
</style>

tailwind

<span class="skillbadge-tw skillbadge-tw--proficient inline-flex items-center gap-1.5 font-semibold rounded-full border-[1.5px] px-3 py-1.5 text-[#241430]" style="border-color:#A8E6C1;--c:#A8E6C1;font-size:13px;">
  TypeScript
  <svg viewBox="0 0 12 12" width="12" height="12" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M2 6.5l2.5 2.5L10 3"/></svg>
</span>
<style>
.skillbadge-tw--beginner { background: transparent; }
.skillbadge-tw--proficient { background: color-mix(in srgb, var(--c) 30%, #FAF7F2); }
.skillbadge-tw--expert { background: var(--c); }
</style>

react

export function SkillBadge({
  skill = "TypeScript",
  level = "proficient",
  color = "#A8E6C1",
  endorsed = true,
  size = 13,
}) {
  const bg = { beginner: "transparent", proficient: `${color}4d`, expert: color }[level] ?? "transparent";
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontWeight: 600, fontSize: size, padding: "0.35em 0.8em", borderRadius: 999, border: `1.5px solid ${color}`, color: "#241430", background: bg }}>
      {skill}
      {endorsed && (
        <svg viewBox="0 0 12 12" width="12" height="12" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M2 6.5l2.5 2.5L10 3" />
        </svg>
      )}
    </span>
  );
}