Account trigger

The right-edge pill of the floating command bar. Bordered pill containing a pulsing success dot, the user’s readiness average (numeric), and a 32px avatar in brand-overlay-20. Static demo here; live menu logic lives in the product’s navigation feature.

Preview

3.4M

Source

apps/docs/app/recipes/account-trigger/recipe.tsx

export default function AccountTriggerRecipe() {
  return (
    <div className="border-stroke bg-surface-2 inline-flex items-center gap-3 rounded-full border p-1 pr-1 pl-1">
      <span className="flex items-center gap-2 pl-2">
        <span
          aria-hidden
          className="bg-success inline-block h-1.5 w-1.5 rounded-full"
          style={{ animation: 'ready-glow 2s ease-in-out infinite' }}
        />
        <span className="text-ink-2 text-2xs font-mono font-bold tabular-nums">3.4</span>
      </span>
      <span
        className="text-label flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-brand-overlay-20)] font-sans font-bold"
        style={{ color: 'var(--color-brand-soft)' }}
      >
        M
      </span>
    </div>
  );
}

export default function AccountTriggerRecipe() {
  return (
    <div className="border-stroke bg-surface-2 inline-flex items-center gap-3 rounded-full border p-1 pr-1 pl-1">
      <span className="flex items-center gap-2 pl-2">
        <span
          aria-hidden
          className="bg-success inline-block h-1.5 w-1.5 rounded-full"
          style={{ animation: 'ready-glow 2s ease-in-out infinite' }}
        />
        <span className="text-ink-2 text-2xs font-mono font-bold tabular-nums">3.4</span>
      </span>
      <span
        className="text-label flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-brand-overlay-20)] font-sans font-bold"
        style={{ color: 'var(--color-brand-soft)' }}
      >
        M
      </span>
    </div>
  );
}