CTA 단추

상담이나 다른 서비스로 넘어가는 링크 단추다. 어느 앱, 어느 프리셋에서도 같은 금색이라 같은 행동을 같은 모양으로 알아본다. hover 하면 금색이 옆으로 흐르고 테두리를 빛이 돈다. 움직임 줄이기를 켠 기기에서는 돌지 않는다.

상태

무료로 상담받기md (38px, 카드 안 · 기본)

상담받기sm (32px, 좁은 자리)

활용 방법

아이콘 바꾸기

기본 화살표 대신 다른 아이콘을 주거나 null 로 없앤다. 새 창으로 여는 링크는 바깥 링크 아이콘이 알맞다.

Preview

견적 계산기 열기

tsx

<CtaButton
  href="https://example.com/pricing?utm_source=app"
  target="_blank"
  rel="noreferrer"
  icon={<ExternalLink size={14} aria-hidden />}
>
  견적 계산기 열기
</CtaButton>

속성

이름	타입	기본값	설명
href	string	-	가는 곳. UTM 은 앱이 붙인다
size	"sm" \| "md"	"md"	높이 32 · 38px
icon	ReactNode \| null	화살표	문구 뒤 아이콘. null 이면 없음
...a	AnchorHTMLAttributes	-	target, rel, data-* 등은 <a> 에 그대로 붙는다. ref 도 <a>