Badge

badge

badge.astro

---
import type { HTMLAttributes } from "astro/types";
import "./badge.css";

interface Props extends HTMLAttributes<"span"> {
  label: string;
  color?: string;
}

const { label = "badge", color } = Astro.props;
---

<span class="badge" style={color ? `--bg-color: ${color}` : {}}>
  {label}
</span>

badge.tsx

import type { JSX } from "preact";
import "./badge.css";

interface Badge extends JSX.HTMLAttributes<HTMLSpanElement> {
  label: string;
  color?: string;
}

export default function Badge(props: Badge) {
  const { label = "badge", color } = props;
  return (
    <span class="badge" style={color ? `--bg-color: ${color}` : {}}>
      {label}
    </span>
  );
}

badge.css

.badge {
  background-color: var(--bg-color, #7a7a7a);
  color: var(--color, #fff);
  padding: 0.5em;
  line-height: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  border-radius: 0.25em;
  font-size: 0.8em;
}