SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="max-w-xl space-y-4">
  <p class="leading-7 text-ink">
    Send <code class="inline-flex items-baseline gap-2 whitespace-nowrap rounded-lg border border-line-strong bg-surface px-1.5 py-px font-mono text-sm leading-5 text-ink">engine=google</code> to choose the
    engine, and <code class="inline-flex items-baseline gap-2 whitespace-nowrap rounded-lg border border-line-strong bg-surface px-1.5 py-px font-mono text-sm leading-5 text-ink">num=100</code> for a full
    page of results. A country is a two-letter code —
    <code class="inline-flex items-baseline gap-2 whitespace-nowrap rounded-lg border border-line-strong bg-surface px-1.5 py-px font-mono text-sm leading-5 text-ink">de</code> or
    <code class="inline-flex items-baseline gap-2 whitespace-nowrap rounded-lg border border-line-strong bg-surface px-1.5 py-px font-mono text-sm leading-5 text-ink">us</code>.
  </p>
  <p class="leading-7 text-ink">
    Left alone, the parameter sends
    <code class="inline-flex items-baseline gap-2 whitespace-nowrap rounded-lg border border-line-strong bg-surface px-1.5 py-px font-mono text-sm leading-5 text-ink">us<span class="font-sans text-xs text-ink-faint">(default)</span></code>.
  </p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%# No sheet under this one, unlike the parameter tag's previews. That tag's fill
    is `surface-sunk`, which the app resolves to the canvas in both modes, so it
    needs a sheet drawn under it to have a fill at all. This chip's fill is
    `surface` — a visible step over the canvas in both modes — and the page that
    spends it draws it on the canvas, so the demo does too. %>
<div class="max-w-xl space-y-4">
  <p class="leading-7 text-ink">
    Send <%= render InlineCodeComponent.new(text: "engine=google") %> to choose the
    engine, and <%= render InlineCodeComponent.new(text: "num=100") %> for a full
    page of results. A country is a two-letter code —
    <%= render InlineCodeComponent.new(text: "de") %> or
    <%= render InlineCodeComponent.new(text: "us") %>.
  </p>
  <%# The note, which is the one thing a surface may say *about* a literal from
      inside the chip: which value the API assumes when nothing is sent. %>
  <p class="leading-7 text-ink">
    Left alone, the parameter sends
    <%= render InlineCodeComponent.new(text: "us", note: t("components.parameter_row.default_value")) %>.
  </p>
</div>

The chip where it is spent: inside a sentence, holding text a reader would retype. Drawn on the preview shell's bare canvas, which is the ground its own page gives it — surface over the canvas is a visible step in both modes, and the ring carries the edge either way.

No params configured.