Copy-Link Pill

<div class="nuda-shr-pill">
  <div class="nuda-shr-pill__url">
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
    <span class="nuda-shr-pill__text">nudaui.com/components</span>
  </div>
  <button class="nuda-shr-pill__copy">Copy</button>
</div>

.nuda-shr-pill {
  display: flex;
  align-items: center;
  background: #141414;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  padding: .25rem .25rem .25rem .75rem;
  gap: .5rem;
  width: 260px;
  box-sizing: border-box;
}

.nuda-shr-pill__url {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 1;
  min-width: 0;
  color: #777;
}

.nuda-shr-pill__text {
  color: #cfcfcf;
  font-size: .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nuda-shr-pill__copy {
  background: #e4ff54;
  color: #0a0a0a;
  border: none;
  border-radius: 99px;
  padding: .35rem .85rem;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s;
}

.nuda-shr-pill__copy:hover {
  opacity: .85;
}