인라인 확인

미리보기

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

사용법

실행 전에 가벼운 액션(예: 필터 재설정)을 확인하세요. Popover와 Button으로 구성하세요. 독립형 export는 없습니다.

고위험 액션(예: 삭제 또는 권한 변경)에는 사용하지 마세요. 대신 AlertDialog를 사용하세요.

구성

Popover + description + cancel / confirm Button

키보드와 접근성

포커스, Escape, 포커스 복원은 Popover와 동일하게 동작합니다.

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

예시 코드

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

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

// Compose Popover + Button; no standalone Confirm export.
<Popover.Root open={open} onOpenChange={setOpen}>
  <Popover.Trigger render={<Button />}>Reset filters</Popover.Trigger>
  <Popover.Content>
    <Popover.Title>Reset filters?</Popover.Title>
    <Popover.Description>Restore default filters.</Popover.Description>
    <Popover.Close render={<Button />}>Keep filters</Popover.Close>
    <Button onClick={reset}>Reset filters</Button>
  </Popover.Content>
</Popover.Root>

주요 API

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

관련 토큰