SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<nav aria-label="Export target">
  <ul class="inline-flex flex-wrap gap-0.5 rounded-lg bg-surface-sunk p-0.5">
    <li>
      <a href="/docs/google/code?target=curl"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >cURL</a>
    </li>
    <li>
      <a href="/docs/google/code?target=ruby"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >Ruby</a>
    </li>
    <li>
      <a href="/docs/google/code?target=python"
           class="inline-block rounded-md bg-surface px-3 py-1 text-sm font-medium text-ink shadow-xs"
           aria-current="page">Python</a>
    </li>
    <li>
      <a href="/docs/google/code?target=javascript"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >JavaScript</a>
    </li>
    <li>
      <a href="/docs/google/code?target=n8n"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >n8n <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-primary text-badge-primary-ink">New</span>
      </a>
    </li>
    <li>
      <a href="/docs/google/code?target=mcp"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >MCP <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-primary text-badge-primary-ink">New</span>
      </a>
    </li>
    <li>
      <a href="/docs/google/code?target=tool"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >Tool <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-primary text-badge-primary-ink">New</span>
      </a>
    </li>
  </ul>
</nav>
1
2
3
4
5
render TabsComponent.new(
  items: target_tabs(active: "python"),
  label: "Export target",
  variant: :segmented
)

Every item is a link, never a button with a listener — the playground's tabs target a Turbo Frame, so the switcher works before any JavaScript loads. These are the real export hrefs, badge included: n8n carries one, the four languages do not.

No params configured.