Component

Alert

확인 버튼 하나로 중요한 안내를 확인하는 대화 상자입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

확인할 안내의 제목입니다.

상황과 다음에 할 일을 설명합니다.

유일한 확인 버튼의 라벨입니다.

확인 버튼과 연결되는 보충 안내입니다.

Code

import { useState } from 'react'

import { Button, Alert } from '@amineslab/ui'

function AlertExample({ title = '안내를 확인해 주세요', description = '초대 링크의 유효 기간이 지났습니다. 팀 관리자에게 새 링크를 요청해 주세요.', confirmLabel = '확인', hint = '', }: {
    title?: string;
    description?: string;
    confirmLabel?: string;
    hint?: string;
} = {}) {
    const [open, setOpen] = useState(false);
    return (<>
      <Button onClick={() => setOpen(true)}>안내 보기</Button>
      <Alert open={open} onOpenChange={setOpen} title={title} description={description} confirmLabel={confirmLabel} hint={hint || undefined}/>
    </>);
}

export default function ExamplePreview() {
  return ((<AlertExample title={"안내를 확인해 주세요"} description={"초대 링크의 유효 기간이 지났습니다. 팀 관리자에게 새 링크를 요청해 주세요."} confirmLabel={"확인"} hint={""}/>))
}

Props

@amineslab/ui에서 Alert를 가져옵니다.

import { Alert } from '@amineslab/ui'

`Alert`

Name	Type	Default	Description
`Alert.open / onOpenChange*`	`boolean / (open: boolean) => void`	-	알림의 제어 상태입니다. 확인 성공 후 닫힘을 요청합니다.
`Alert.title*`	`ReactNode`	-	접근 가능한 필수 제목입니다.
`Alert.description / children`	`ReactNode`	-	제목 아래 설명과 별도 본문입니다.
`Alert.confirmLabel`	`string`	`'확인'`	유일한 확인 버튼의 라벨입니다.
`Alert.onConfirm`	`() => void \| Promise<void>`	-	선택적 확인 처리입니다. 생략하면 바로 닫고, Promise는 성공 시 닫으며 실패 시 유지합니다.
`Alert.onConfirmError`	`(error: unknown) => void`	-	확인 처리 실패를 안내하는 콜백입니다.
`Alert.onAfterConfirmClose`	`() => void`	-	확인 후 닫히고 이전 요소로 포커스를 돌려준 뒤 한 번 호출합니다.
`Alert.hint / hintId`	`ReactNode / string`	-	확인 버튼과 연결할 보충 안내와 선택적 ID입니다.
`Alert.icon`	`ReactNode`	-	제목 앞에 표시할 선택적 아이콘입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

사용 기준

권장하는 사용

취소나 선택이 없는 안내에 사용합니다. 두 선택지가 필요하면 Confirm, 편집·입력은 Dialog를 사용합니다.
PC·모바일 모두 중앙 카드입니다. 확인 버튼에 처음 포커스하며 바깥 클릭과 Escape로 닫히지 않습니다.
onConfirm을 생략하면 확인 즉시 닫습니다. 비동기 확인은 처리 중 중복 실행을 막고 실패하면 열린 상태를 유지합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Tab: 알림 안에서 포커스 이동
Enter / Space: 확인 버튼 실행