Focus chip

Dismissible brand-tinted pill that signals an active narrowing applied across a catalog — e.g. focusing on a single skill dimension surfaced from a recent evaluation. Sits above the catalog grid.

Preview

Focusing on: Scale Estimation

Source

apps/docs/app/recipes/focus-chip/recipe.tsx

export default function FocusChipRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-3 rounded-2xl border p-5">
      <span className="text-ink-1 inline-flex h-8 items-center gap-2 rounded-full border border-[var(--color-brand-overlay-30)] bg-[var(--color-brand-overlay-10)] px-3 text-xs font-medium">
        Focusing on: Scale Estimation
        <button
          type="button"
          aria-label="Clear focus"
          className="text-ink-2 hover:text-ink-1 -mr-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-[12px] leading-none"
        >
          ×
        </button>
      </span>
    </div>
  );
}

export default function FocusChipRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-3 rounded-2xl border p-5">
      <span className="text-ink-1 inline-flex h-8 items-center gap-2 rounded-full border border-[var(--color-brand-overlay-30)] bg-[var(--color-brand-overlay-10)] px-3 text-xs font-medium">
        Focusing on: Scale Estimation
        <button
          type="button"
          aria-label="Clear focus"
          className="text-ink-2 hover:text-ink-1 -mr-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-[12px] leading-none"
        >
          ×
        </button>
      </span>
    </div>
  );
}