Installation
bash
npx axis-cli add dialogUsage
tsx
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@axis-ds/ui-react'
export function Example() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>
Dialog description goes here.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
)
}With Form
tsx
<Dialog>
<DialogTrigger asChild>
<Button>Edit Profile</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here.
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="name" className="text-right">Name</Label>
<Input id="name" className="col-span-3" />
</div>
</div>
<div className="flex justify-end">
<Button type="submit">Save changes</Button>
</div>
</DialogContent>
</Dialog>Components
Dialog다이얼로그 루트 컨테이너
DialogTrigger다이얼로그를 여는 트리거
DialogContent다이얼로그 콘텐츠 영역
DialogHeader다이얼로그 헤더
DialogTitle다이얼로그 제목
DialogDescription다이얼로그 설명
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | 다이얼로그 열림 상태 (controlled) |
onOpenChange | (open: boolean) => void | - | 열림 상태 변경 콜백 |
modal | boolean | true | 모달 모드 여부 |
openType:
booleanDefault:
-다이얼로그 열림 상태 (controlled)
onOpenChangeType:
(open: boolean) => voidDefault:
-열림 상태 변경 콜백
modalType:
booleanDefault:
true모달 모드 여부
Accessibility
Radix UI Dialog 기반으로 WAI-ARIA Dialog (Modal) 패턴을 따릅니다. 열릴 때 포커스가 다이얼로그 내부로 이동하고 갇히며(focus trap), 닫히면 트리거로 포커스가 복원됩니다.
| Key | Action |
|---|---|
| Esc | 다이얼로그를 닫습니다. |
| Tab | 다이얼로그 내 포커스 가능 요소를 순환합니다 (밖으로 나가지 않음). |
| Shift + Tab | 역방향으로 포커스를 순환합니다. |
role="dialog"+aria-modal="true"가 자동 적용됩니다.DialogTitle은aria-labelledby로 연결되므로 필수입니다. 시각적으로 숨기려면sr-only를 사용하세요.DialogDescription은aria-describedby로 연결됩니다.- 열린 동안 배경 콘텐츠는 비활성화되고 스크린리더에서 가려집니다.