Borderline pill

Dashed warning score chip used inside dim-rows to flag scores that crossed or hovered around the 3.5 passing threshold.

Preview

2.8 → 2.23.4 → 3.53.0 → 2.9

Source

apps/docs/app/recipes/borderline-pill/recipe.tsx

export default function BorderlinePillRecipe() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      {['2.8 → 2.2', '3.4 → 3.5', '3.0 → 2.9'].map((label) => (
        <span
          key={label}
          className="text-ink-3 text-2xs rounded-full border border-dashed px-[7px] py-px tabular-nums"
          style={{ borderColor: 'var(--color-warning-border)' }}
        >
          {label}
        </span>
      ))}
    </div>
  );
}

export default function BorderlinePillRecipe() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      {['2.8 → 2.2', '3.4 → 3.5', '3.0 → 2.9'].map((label) => (
        <span
          key={label}
          className="text-ink-3 text-2xs rounded-full border border-dashed px-[7px] py-px tabular-nums"
          style={{ borderColor: 'var(--color-warning-border)' }}
        >
          {label}
        </span>
      ))}
    </div>
  );
}