PopConfirm

요소를 클릭하거나 호버하여 사용자에게 확인 또는 취소 옵션을 제공할 수 있습니다.
더 자세한 예제는

Popover

컴포넌트를 참고하세요. PopConfirm은 Popover에서 title과 footer를 기본적으로 제공하며, 이를 커스텀할 수 있습니다.

import { PopConfirm } from 'sud-ui';

사용할 때

요소를 클릭하거나 호버하여 사용자에게 확인 또는 취소 옵션을 제공할 때

사용예제

Basic Usage

기본 사용 예시입니다.

Use OnCancel and OnConfirm

확인/취소 버튼 클릭 시 콜백 예시입니다.

import { Button, PopConfirm, toast } from "sud-ui";

export default function App() {
  return (
    <PopConfirm
      title="Are you sure?"
      content="If you delete this, it cannot be recovered."
      type="danger"
      onCancel={() => {
        toast.danger("cancel");
      }}
      onConfirm={() => {
        toast.success("confirm");
      }}
    >
      <Button colorType="volcano">Delete This</Button>
    </PopConfirm>
  );
}

Title type

제목 타입 예시입니다.

import { Button, PopConfirm } from "sud-ui";

export default function App() {
  return (
    <div className="flex gap-[10px]">
      <PopConfirm
        title="Danger"
        content="This is a danger type confirmation"
        type="danger"
      >
        <Button colorType="danger">Danger</Button>
      </PopConfirm>
      <PopConfirm
        title="Warning"
        content="This is a warning type confirmation"
        type="warning"
      >
        <Button colorType="warning">Warning</Button>
      </PopConfirm>
      <PopConfirm
        title="Success"
        content="This is a success type confirmation"
        type="success"
      >
        <Button colorType="success">Success</Button>
      </PopConfirm>
    </div>
  );
}

Title & Footer Custom

제목과 푸터 영역 커스텀 예시입니다.

import { Button, PopConfirm, Typography } from "sud-ui";
import { CheckCircleFill, LogoReact, LogoSud, XMarkCircleFill } from "sud-icons";

export default function App() {
  return (
    <PopConfirm
      title={
        <div className="flex items-center">
          <LogoReact />
          <Typography>Are you React Developer?</Typography>
        </div>
      }
      content="If you React Developer, you can use Soon UI Design Library."
      footer={
        <div className="flex gap-[10px] justify-end my-[10px]">
          <Button size="sm" icon={<XMarkCircleFill size={18} />}>
            Cancel
          </Button>
          <Button
            colorType="mint"
            size="sm"
            icon={<CheckCircleFill size={18} />}
          >
            Okay
          </Button>
        </div>
      }
    >
      <Button icon={<LogoSud />}>Start Soon UI Design</Button>
    </PopConfirm>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

children

PopConfirm 트리거 역할을 하는 요소 (ReactNode)

ReactNode

-

title

PopConfirm 제목 (ReactNode)

ReactNode

-

content

PopConfirm 내용 (ReactNode)

ReactNode

-

trigger

트리거 방식 (PopupTrigger)

click

|

hover

|

contextMenu

hover

placement

PopConfirm 위치 (PopupPlacement)

top

|

bottom

|

left

|

right

|

top-left

|

top-right

|

bottom-left

|

bottom-right

|

left-top

|

left-bottom

|

right-top

|

right-bottom

bottom

open

PopConfirm 열림 상태 (제어용)

boolean

-

defaultOpen

PopConfirm 기본 열림 상태

boolean

false

onOpenChange

PopConfirm 열림 상태 변경 콜백 ((open: boolean) => void)

(open: boolean) => void

-

closeOnClick

클릭 시 닫기 여부

boolean

true

disabled

비활성화 여부

boolean

false

divider

구분선 표시 여부

boolean

false

background

배경색(palette값 또는 HEX code)

string

-

color

텍스트 색상(palette값 또는 HEX code)

string

-

border

테두리 표시 여부

boolean

true

borderColor

테두리 색상(palette값 또는 HEX code)

string

-

borderType

테두리 스타일

solid

|

dashed

|

dotted

|

double

|

groove

|

ridge

|

inset

|

outset

|

none

solid

borderWeight

테두리 두께

number

1

shadow

그림자 효과

none

|

sm

|

md

|

lg

sm

colorType

색상 타입

default

|

primary

|

success

|

warning

|

danger

|

info

|

red

|

rose

|

coral

|

orange

|

volcano

|

apricot

|

yellow

|

gold

|

amber

|

green

|

lime

|

mint

|

blue

|

sky

|

cerulean

|

indigo

|

cobalt

|

navy

|

purple

|

plum

|

orchid

|

forest

|

sage

|

warm-gray

|

cool-gray

|

neutral

|

text

|

ghost

default

type

아이콘 타입

primary

|

success

|

danger

|

warning

primary

onCancel

취소 버튼 클릭 시 콜백 (() => void)

() => void

-

onConfirm

확인 버튼 클릭 시 콜백 (() => void)

() => void

-

footer

푸터 영역 커스텀 (ReactNode | boolean)

ReactNode | boolean

true

className

추가 클래스명

string

-

style

추가 스타일 (CSSProperties)

CSSProperties

{}

Soon UI Design

PopConfirm

사용할 때

사용예제

사용 방법

개인정보 처리방침

서비스 약관