컴포넌트
Empty
표시할 데이터가 없을 때 안내합니다.
설치
pnpm dlx ply-ui add empty button공통 설치 설정을 먼저 적용합니다.
사용법
표시할 데이터가 없을 때 제목, 설명, 작업 버튼을 배치하는 section입니다. 자체 상태나 데이터 조회 기능은 없습니다.
구현 코드
components/ui/empty.tsx
import type { ComponentProps } from "react";
import { cx } from "../../lib/cx";
import "./empty.css";
export function Empty({ className, ...props }: ComponentProps<"section">) {
return <section {...props} className={cx("rbx-empty", className)} />;
}
components/ui/empty.css
/* empty — semantic HTML composition. */
.rbx-empty {
text-align: center;
padding: 48px 24px;
border: 1px dashed var(--rbx-color-stroke-emphasis);
border-radius: 16px;
color: var(--rbx-color-content-default);
}