Groudit UI

Object Identifier

Betav1.0.0

코드 식별자 표현 — 주문번호·SKU·사용자ID + 상태 배지 + 클릭 가능 링크를 한 묶음으로. 테이블 cell 과 객체 헤더 두 곳에서 일관 사용. SAP UI5 ObjectIdentifier 디자인 패턴 참고.

Loading…
import { ObjectIdentifier } from "@/components/ui/object-identifier";

// 객체 헤더 (강조)
<ObjectIdentifier
  id="ORD-2026-0042"
  title="Customer Acme Inc."
  status={{ label: "Approved", state: "informative" }}
  emphasized
/>

// 테이블 셀
<ObjectIdentifier
  id="SKU-1001"
  status={{ label: "In stock", state: "positive" }}
  href="/products/SKU-1001"
/>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/object-identifier.json

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

PackageVersion
clsx2.1.1
tailwind-merge3.6.0

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

Accessibility

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.12.4.4

Notes

  • •href 제공 시 링크 — 코드(ID)는 모노스페이스 폰트.
  • •status 배지에 점(dot) + 텍스트 — 색만으로 상태 표시 X.