컴포넌트
Alert
화면 안에 안내 메시지를 표시합니다.
설치
pnpm dlx ply-ui add alert공통 설치 설정을 먼저 적용합니다.
사용법
AlertTitle과 AlertDescription으로 제목과 설명을 구분합니다.
화면에 유지되는 안내에 사용합니다. 일시적인 작업 결과는 Toast를 사용합니다.
구성
| 구성 요소 | 역할 |
|---|---|
Alert | 알림 내용을 묶습니다. 기본 role은 alert입니다. |
AlertTitle | 알림 제목입니다. |
AlertDescription | 알림의 상세 내용입니다. |
구현 코드
components/ui/alert.tsx
import type { ComponentProps } from "react";
import { cx } from "../../lib/cx";
import "./alert.css";
export function Alert({ className, ...props }: ComponentProps<"div">) {
return (
<div role="status" {...props} className={cx("rbx-alert", className)} />
);
}
export function AlertTitle({ className, ...props }: ComponentProps<"h3">) {
return <h3 {...props} className={cx("rbx-card-title", className)} />;
}
export function AlertDescription({ className, ...props }: ComponentProps<"p">) {
return <p {...props} className={cx("rbx-description", className)} />;
}
components/ui/alert.css
/* alert — semantic HTML composition. */
.rbx-alert {
border: 1px solid var(--rbx-color-stroke-emphasis);
border-radius: 8px;
padding: 16px;
background: var(--rbx-color-surface-100);
}