Alert 경고

원문 보기 위키 갱신 2026.10.11

경고 메시지처럼 사용자의 주의를 끌어야 하는 정보를 보여 주는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

페이지가 사용자에게 경고 정보를 알려야 할 때 사용해요.

기본 사용법

success, danger, warning, info 네 가지 스타일이 있어요.

:::demo

<template>
  <div class="alert-demo-1">
    <d-alert type="success" :closeable="false">success</d-alert>
    <d-alert type="danger" :closeable="false">danger</d-alert>
    <d-alert type="warning" :closeable="false">warning</d-alert>
    <d-alert type="info" :closeable="false">info</d-alert>
    <d-alert type="simple" :closeable="false">simple</d-alert>
  </div>
</template>
<style scoped>
.alert-demo-1 > * {
  margin-bottom: 20px;
}
</style>

:::

닫을 수 있는 알림

닫기 버튼을 표시해서, 클릭하면 알림을 닫을 수 있어요.

:::demo

<template>
  <div class="alert-demo-2">
    <d-alert type="success" @close="handleClose">success</d-alert>
    <d-alert type="danger" @close="handleClose">danger</d-alert>
    <d-alert type="warning" @close="handleClose">warning</d-alert>
    <d-alert type="info" @close="handleClose">info</d-alert>
    <d-alert type="simple" @close="handleClose">simple</d-alert>
  </div>
</template>
<script>
export default {
  setup() {
    const handleClose = ($event) => {
      console.log($event);
    };
    return {
      handleClose,
    };
  },
};
</script>
<style scoped>
.alert-demo-2 > * {
  margin-bottom: 20px;
}
</style>

:::

기본 아이콘 사용하지 않기

기본 타입 아이콘을 사용하지 않아요.

:::demo

<template>
  <div class="alert-demo-3">
    <d-alert type="success" :show-icon="false">success</d-alert>
    <d-alert type="danger" :show-icon="false">danger</d-alert>
    <d-alert type="warning" :show-icon="false">warning</d-alert>
    <d-alert type="info" :show-icon="false">info</d-alert>
    <d-alert type="simple" :show-icon="false">simple</d-alert>
  </div>
</template>
<style scoped>
.alert-demo-3 > * {
  margin-bottom: 20px;
}
</style>

:::

텍스트 가운데 정렬

:::demo

<template>
  <div class="alert-demo-4">
    <d-alert type="success" center>success</d-alert>
    <d-alert type="danger" center>danger</d-alert>
    <d-alert type="warning" center>warning</d-alert>
    <d-alert type="info" center>info</d-alert>
    <d-alert type="simple" center>simple</d-alert>
  </div>
</template>
<style scoped>
.alert-demo-4 > * {
  margin-bottom: 20px;
}
</style>

:::

Alert 파라미터

파라미터	타입	기본값	설명	Demo 링크
type	AlertType	'info'	필수, 알림 스타일 지정	기본 사용법
css-class	`string`	--	선택, class 이름 커스텀
closeable	`boolean`	true	선택, 기본으로 닫기 버튼 표시	기본 사용법
dismiss-time	`number`	--	선택, alert 자동 닫기 지연 시간(`ms`)
show-icon	`boolean`	true	선택, 기본 타입 아이콘 사용 여부	기본 아이콘 미사용
center	`boolean`	false	선택, 텍스트 가운데 정렬 표시 여부	텍스트 가운데 정렬

Alert 이벤트

이벤트명	타입	설명	Demo 링크
close	`(event?: MouseEvent) => void`	선택, 닫을 때 트리거되는 콜백 함수	닫기 가능한 알림

Alert 타입 정의

AlertType

기본값은 'info'이고, alert 경고 표시의 타입을 지정해요.

type AlertType = 'success' | 'danger' | 'warning' | 'info' | 'simple';

더 알아보기 (Learn more)

type으로 success·danger·warning·info·simple 다섯 가지 스타일을 고르고, closeable과 dismiss-time으로 닫기 동작을 제어할 수 있어요.