Dual-path CTA

Dashboard next-action band with a recommended primary path (brand-overlay gradient + brand-tinted border) and a secondary review path. Both rest the action against a meta pill so the user sees mode, duration, or queue state before committing.

Button

Preview

Next problem · closest move

Design Kafka — lifts Bottleneck Analysis.

L3 · 45-minute session. Based on your last three attempts, this is the cheapest dimension to cross 3.5.

Starts coaching mode

Review queue · concepts

3 concepts due today.

Spaced-repetition cards for quorum writes, read-your-writes consistency, and consistent hashing.

~ 8 min · 3 of 12 in queue

Source

apps/docs/app/recipes/dual-cta/recipe.tsx

import { Button } from '@hey-mike/tungsten';

export default function DualCtaRecipe() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      {/* The brand-variant CTA below is the single ember on this card; the surface,
          border, and eyebrow all read neutral so the orange button alone carries voltage. */}
      <article className="border-stroke rounded-xl relative flex flex-col gap-3.5 overflow-hidden border bg-surface-2 px-[26px] py-6">
        <span className="tracking-label text-ink-2 text-2xs font-mono font-bold uppercase">
          Next problem · closest move
        </span>
        <h3 className="text-ink-1 text-lg font-semibold tracking-[-0.01em]">
          Design Kafka — lifts Bottleneck Analysis.
        </h3>
        <p className="text-ink-2 text-sm leading-relaxed">
          L3 · 45-minute session. Based on your last three attempts, this is the cheapest dimension
          to cross 3.5.
        </p>
        <div className="mt-auto flex items-center justify-between pt-2.5">
          <span className="tracking-label text-ink-3 text-2xs font-mono font-bold uppercase">
            Starts coaching mode
          </span>
          <Button variant="brand" size="md">
            Start session
          </Button>
        </div>
      </article>
      <article className="border-stroke bg-surface relative flex flex-col gap-3.5 overflow-hidden rounded-3xl border p-6">
        <span className="tracking-label text-ink-3 text-2xs font-mono font-bold uppercase">
          Review queue · concepts
        </span>
        <h3 className="text-ink-1 text-lg font-semibold tracking-[-0.01em]">
          3 concepts due today.
        </h3>
        <p className="text-ink-2 text-sm leading-relaxed">
          Spaced-repetition cards for quorum writes, read-your-writes consistency, and consistent
          hashing.
        </p>
        <div className="mt-auto flex items-center justify-between pt-2.5">
          <span className="tracking-label text-ink-3 text-2xs font-mono font-bold uppercase">
            ~ 8 min · 3 of 12 in queue
          </span>
          <Button variant="primary" size="md">
            Open review
          </Button>
        </div>
      </article>
    </div>
  );
}

import { Button } from '@hey-mike/tungsten';

export default function DualCtaRecipe() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      {/* The brand-variant CTA below is the single ember on this card; the surface,
          border, and eyebrow all read neutral so the orange button alone carries voltage. */}
      <article className="border-stroke rounded-xl relative flex flex-col gap-3.5 overflow-hidden border bg-surface-2 px-[26px] py-6">
        <span className="tracking-label text-ink-2 text-2xs font-mono font-bold uppercase">
          Next problem · closest move
        </span>
        <h3 className="text-ink-1 text-lg font-semibold tracking-[-0.01em]">
          Design Kafka — lifts Bottleneck Analysis.
        </h3>
        <p className="text-ink-2 text-sm leading-relaxed">
          L3 · 45-minute session. Based on your last three attempts, this is the cheapest dimension
          to cross 3.5.
        </p>
        <div className="mt-auto flex items-center justify-between pt-2.5">
          <span className="tracking-label text-ink-3 text-2xs font-mono font-bold uppercase">
            Starts coaching mode
          </span>
          <Button variant="brand" size="md">
            Start session
          </Button>
        </div>
      </article>
      <article className="border-stroke bg-surface relative flex flex-col gap-3.5 overflow-hidden rounded-3xl border p-6">
        <span className="tracking-label text-ink-3 text-2xs font-mono font-bold uppercase">
          Review queue · concepts
        </span>
        <h3 className="text-ink-1 text-lg font-semibold tracking-[-0.01em]">
          3 concepts due today.
        </h3>
        <p className="text-ink-2 text-sm leading-relaxed">
          Spaced-repetition cards for quorum writes, read-your-writes consistency, and consistent
          hashing.
        </p>
        <div className="mt-auto flex items-center justify-between pt-2.5">
          <span className="tracking-label text-ink-3 text-2xs font-mono font-bold uppercase">
            ~ 8 min · 3 of 12 in queue
          </span>
          <Button variant="primary" size="md">
            Open review
          </Button>
        </div>
      </article>
    </div>
  );
}