Alert Dialog | Surflane

사용 가능Base UIBase UI 참조

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

같은 예시를 각 크기와 밀도에서 비교하세요. 전환하면 입력 값과 선택 상태가 유지됩니다. 크기 가이드와 비교

실행된 미리보기 작업이 없습니다.

사용법

되돌리기 어려운 작업(예: 삭제 또는 폐기)을 확인하세요. Content.initialFocus를 안전한 취소 버튼에 지정하세요.

중립적인 OK나 Yes로 액션을 표시하지 마세요. 대신 구체적인 액션 이름을 사용하세요. 외부 클릭을 응답으로 처리하지 마세요. 명시적인 선택을 기다리세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root → Trigger → Content → Header(Title / Description) + Footer(Cancel / Action)

키보드와 접근성

포커스는 안전한 취소 액션에서 시작하며 dialog 안에 유지됩니다. Escape는 취소로 동작합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { AlertDialog, Button } from '@surflane/ui'

<AlertDialog.Root open={open} onOpenChange={setOpen}>
  <AlertDialog.Trigger render={<Button />}>Discard</AlertDialog.Trigger>
  <AlertDialog.Content initialFocus={cancelRef}>
    <AlertDialog.Header>
      <AlertDialog.Title>Discard draft?</AlertDialog.Title>
      <AlertDialog.Description>This cannot be undone.</AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Close ref={cancelRef} render={<Button />}>
        Keep draft
      </AlertDialog.Close>
      <Button variant='destructive' onClick={discard}>
        Discard draft
      </Button>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

주요 API

Alert Dialog — 공통 래퍼 props
Prop	설명	기본값
`Root.open / onOpenChange`	제어 상태	—
`Content.initialFocus`	안전한 취소 버튼 ref	—
`Content.size`	Dialog's scale	small

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

미리보기

사용법

구성

키보드와 접근성

예시 코드

주요 API

관련 토큰