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
43
44
45
46
47
48
49
50
51
52
<div class="space-y-6">
  <div class="flex items-center gap-3">
    <span class="w-20 text-xs text-ink-muted">Bordered</span>
    <button type="button"
        class="inline-flex shrink-0 items-center gap-1.5 rounded-md text-sm text-ink-muted transition-colors hover:border-accent-line hover:text-ink border border-line-strong bg-surface px-2.5 py-1"
        data-controller="copy"
        data-action="copy#copy"
        data-copy-text-value="curl https://api.searchapi.io/api/v1/search"
        >
      <span class="inline-flex items-center gap-1.5" data-copy-target="idle">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
         stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0" aria-hidden="true">
          <path d="M9 3.75h9a1.5 1.5 0 0 1 1.5 1.5v9" /><path d="M6 8.25h9a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5H6a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 6 8.25Z" />
        </svg>
        <span>Copy</span>
      </span>
      <span class="inline-flex items-center gap-1.5 text-ink" data-copy-target="done" role="status" hidden>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
         stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0" aria-hidden="true">
          <path d="M4.5 12.75 9 17.25l10.5-10.5" />
        </svg>
        <span>Copied</span>
      </span>
    </button>
  </div>
  <div class="flex items-center gap-3">
    <span class="w-20 text-xs text-ink-muted">Bare</span>
    <span class="inline-flex items-center gap-2 rounded-md border border-line bg-surface px-3 py-1.5">
      <span class="font-mono text-sm text-ink-muted">/api/v1/search</span>
      <button type="button"
        class="inline-flex shrink-0 items-center gap-1.5 rounded-md text-sm text-ink-muted transition-colors hover:border-accent-line hover:text-ink border border-transparent px-1.5 py-1"
        data-controller="copy"
        data-action="copy#copy"
        data-copy-text-value="/api/v1/search"
        aria-label="Copy">
        <span class="inline-flex items-center gap-1.5" data-copy-target="idle">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
         stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0" aria-hidden="true">
            <path d="M9 3.75h9a1.5 1.5 0 0 1 1.5 1.5v9" /><path d="M6 8.25h9a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5H6a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 6 8.25Z" />
          </svg>
        </span>
        <span class="inline-flex items-center gap-1.5 text-ink" data-copy-target="done" role="status" hidden>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
         stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0" aria-hidden="true">
            <path d="M4.5 12.75 9 17.25l10.5-10.5" />
          </svg>
          <span>Copied</span>
        </span>
      </button>
    </span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="space-y-6">
  <div class="flex items-center gap-3">
    <span class="w-20 text-xs text-ink-muted">Bordered</span>
    <%= render CopyButtonComponent.new(text: "curl https://api.searchapi.io/api/v1/search") %>
  </div>
  <div class="flex items-center gap-3">
    <span class="w-20 text-xs text-ink-muted">Bare</span>
    <%# Shown on the surface its host draws, since :bare spends no border of
        its own and would otherwise float. %>
    <span class="inline-flex items-center gap-2 rounded-md border border-line bg-surface px-3 py-1.5">
      <span class="font-mono text-sm text-ink-muted">/api/v1/search</span>
      <%= render CopyButtonComponent.new(text: "/api/v1/search", variant: :bare) %>
    </span>
  </div>
</div>

:bordered stands on its own and says "Copy" in words; :bare is a glyph that sits inside a host already drawing the border, which is the endpoint chip's case — so it carries its name in aria-label instead.

No params configured.