유틸리티 / logo
Logo
브랜드 워드마크 — 홈으로 가는 텍스트 앵커.
01 · Specimen
먼저 보고, 그다음 계약을 읽습니다
브랜드 워드마크 — 홈으로 가는 텍스트 앵커.
Workbench 불러오는 중…
Component intent의도와 경계 읽기
display 폰트·brand-claret 컬러·letter-spacing 으로 조판된 워드마크를 `<a>` 로 렌더한다. TopNav 좌상단·Footer 로고 슬롯의 홈 링크로 쓰는 텍스트 전용 로고이며(이미지·SVG 아님), size 세 단계와 표시 텍스트를 prop 으로 바꾼다. href 기본값은 `/` 라 별도 설정 없이 홈 링크로 동작한다.
02 · Use
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
기본
import { Logo } from "@axe/ui";// 기본: text="AXE Labs", size="md", href="/"<Logo />크기·텍스트·목적지 지정
import { Logo } from "@axe/ui";<Logo size="lg" text="AXE" href="https://axelabs.ai" />CSS-only (비-React)
<a class="axe-logo" href="/">AXE Labs</a><a class="axe-logo axe-logo--sm" href="/">AXE Labs</a><a class="axe-logo axe-logo--lg" href="/">AXE Labs</a>03 · React
Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
size | "sm" | "md" | "lg" | — | "md" | 워드마크 글자 크기. md 는 modifier 클래스 없는 기본. |
text | string | — | "AXE Labs" | 표시(그리고 접근가능 이름이 되는) 텍스트. |
href | string | — | "/" | 클릭 목적지. AnchorHTMLAttributes 상속 필드이나 기본 / 로 홈 링크. |
...rest | React.AnchorHTMLAttributes<HTMLAnchorElement> | — | — | className(axe-logo 뒤 병합)·target·onClick 등 나머지는 <a> 로 전파. |
04 · Any stack
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-logo | stable | 워드마크 앵커 루트(display 폰트·brand-claret 컬러). |
.axe-logo--sm | stable | sm 크기 변형(text-base). |
.axe-logo--lg | stable | lg 크기 변형(text-2xl). |
05 · Inclusive
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
Keyboard
- Tab 으로 포커스
- Enter 로 이동(네이티브 앵커)
ARIA
네이티브 <a> — text 가 접근가능 이름이 된다. 이미지가 아니라 aria-label 불요.
Notes
text 를 빈 문자열로 두면 링크의 접근가능 이름이 사라진다 — 최소한의 브랜드 텍스트를 유지할 것. md 는 modifier 없이 axe-logo 단독.
06 · Judgment