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
<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="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>
1
2
3
4
5
6
render CopyButtonComponent.new(
  text: text,
  label: label.presence,
  copied_label: copied_label.presence,
  variant: variant
)

The control is live here: the preview layout ships the importmap, so pressing it really does write to the clipboard and really does swap to the confirmation. That swap is the thing worth looking at — it changes the glyph and the word together, so it survives being read with colour ignored.

Param Description Input

—

—

—

—