CTA 알약

머리 오른쪽이나 사이드바 아래에 놓는 작은 링크다. 높이는 28px 하나다. 글을 읽는 사람을 막지 않도록 테두리만 두고 회색 글자로 조용하게 있다가, 가리키면 primary 로 바뀐다. 좁은 화면에서는 shortLabel 로 줄여 머리 한 줄에 들어간다.

상태

맞춤 제작 문의

block (사이드바)

활용 방법

머리 오른쪽에 놓기

검색·테마 단추 앞에 둔다. 창을 좁히면 shortLabel 로 바뀐다. iframe 안에서 숨기려면 TopLevelOnly 로 감싼다.

Preview

WORDMARK문의맞춤 제작 문의

tsx

<header className="flex items-center justify-between">
  <Logo />
  <TopLevelOnly>
    <CtaPill href={consultUrl} shortLabel="문의">
      맞춤 제작 문의
    </CtaPill>
  </TopLevelOnly>
</header>

속성

이름	타입	기본값	설명
children	ReactNode	-	넓은 화면 문구
shortLabel	ReactNode	-	sm 미만에서 대신 보이는 짧은 문구
block	boolean	false	부모 폭을 채운다
...a	AnchorHTMLAttributes	-	href, target, data-* 등. ref 는 <a>