syidaxdesign system
홈 가격 내 정보
ComponentsFeedback

Toast

작업 결과를 잠시 표시하고 자동으로 닫는 알림입니다.

<sy-toast>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-toast duration="3000" id="sample"></sy-toast>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">알림 띄우기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.createToast("success", {
      "headerSlot": "저장 완료",
      "bodySlot": "프로젝트 변경 사항을 저장했습니다.",
      "closable": true,
      "duration": 3000,
      "position": "bottomRight"
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

사용 가이드

#

저장 완료처럼 작업을 방해하지 않는 짧은 피드백에 사용합니다. 반드시 확인받아야 하는 내용에는 Modal이 알맞습니다.

  1. 알림 생성

    createToast() 또는 상태별 메서드로 알림을 만듭니다. 본문의 지정 위치에 차례로 쌓입니다.

  2. 표시 시간 정하기

    duration은 밀리초이며 0이면 자동으로 닫히지 않습니다. 오래 남는 알림에는 closable을 제공하세요.

  3. 작업에 맞춰 닫기

    앱의 흐름에서 필요하면 closeToast()로 알림을 종료하세요.

예제

#

작업 완료

성공 알림은 기본 3초 후 닫힙니다.

코드 보기
HTML
<sy-toast id="sample"></sy-toast>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">알림 띄우기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.createToast("success", {
      "headerSlot": "저장 완료",
      "bodySlot": "프로젝트 변경 사항을 저장했습니다.",
      "closable": true,
      "duration": 3000
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

오류 알림

실패 이유와 다음 행동을 전달합니다.

코드 보기
HTML
<sy-toast id="sample"></sy-toast>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">알림 띄우기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.createToast("error", {
      "headerSlot": "저장 실패",
      "bodySlot": "연결 상태를 확인한 뒤 다시 시도하세요.",
      "closable": true,
      "duration": 3000
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

사용자가 닫기

duration을 0으로 지정해 닫기 전까지 유지합니다.

코드 보기
HTML
<sy-toast id="sample"></sy-toast>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">알림 띄우기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.createToast("info", {
      "headerSlot": "안내",
      "bodySlot": "닫기 버튼으로 알림을 닫을 수 있습니다.",
      "closable": true,
      "duration": 0
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

여러 알림

버튼을 여러 번 누르면 새 알림이 위쪽에 쌓입니다.

코드 보기
HTML
<sy-toast latesttop id="sample"></sy-toast>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">알림 띄우기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.createToast("neutral", {
      "headerSlot": "새 알림",
      "bodySlot": "프로젝트 변경 사항을 저장했습니다.",
      "closable": true,
      "duration": 8000,
      "position": "topRight"
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

상태별 메서드

createSuccessToast처럼 상태별 메서드로도 같은 알림을 만들 수 있습니다.

코드 보기
HTML
<sy-toast id="sample"></sy-toast>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">성공 알림</sy-button>
  <sy-button id="action-1" size="small">주의 알림</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.createSuccessToast({
      "headerSlot": "저장 완료",
      "bodySlot": "프로젝트 변경 사항을 저장했습니다.",
      "closable": true,
      "duration": 3000
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.createWarningToast({
      "headerSlot": "주의",
      "bodySlot": "변경 사항을 확인하세요.",
      "closable": true,
      "duration": 3000
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

알림의 슬롯과 개별 제어

직접 만든 Toast Item에 아이콘·제목·본문·푸터를 넣습니다. show()로 표시하고 close()로 제거합니다. 다시 표시할 때는 새 인스턴스를 만듭니다.

코드 보기
HTML
<sy-button id="new-toast">알림 표시</sy-button>
<sy-button id="close-toast">현재 알림 닫기</sy-button>

<script type="module">
  await (root => {
    let current;
    root.querySelector('#new-toast').addEventListener('click', async () => {
      await current?.close();
      current = document.createElement('sy-toast-item');
      current.duration = 0;
      current.closable = true;
      current.innerHTML = _msg("m_bb89f25d8ea4");
      root.append(current);
      await current.show();
    });
    root.querySelector('#close-toast').addEventListener('click', () => current?.close());
  })(document);
</script>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-toast>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse같은 위치에서 새 알림을 먼저 표시합니다.
number3000자동 닫힘까지의 시간(ms)입니다. 0이면 자동으로 닫지 않습니다.
HTMLSyToastItemElement['animation']'none'Default enter/exit animation for spawned toasts. Per-call `option.animation` overrides this.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

HTMLSyToastItemElement['animationSpeed']'fast'Default animation speed for spawned toasts. Per-call `option.animationSpeed` overrides this.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

Methods

MethodReturnsDescription
Promise<HTMLSyToastItemElement>지정한 상태와 옵션으로 알림을 생성합니다.
Promise<HTMLSyToastItemElement>중립 상태의 알림을 생성합니다.
Promise<HTMLSyToastItemElement>성공 알림을 생성합니다.
Promise<HTMLSyToastItemElement>오류 알림을 생성합니다.
Promise<HTMLSyToastItemElement>정보 알림을 생성합니다.
Promise<HTMLSyToastItemElement>주의 알림을 생성합니다.
Promise<void>전달한 sy-toast-item 요소를 닫습니다.

Slots

SlotDescription
icon 영역에 표시할 내용입니다.
header 영역에 표시할 내용입니다.
body 영역에 표시할 내용입니다.
footer 영역에 표시할 내용입니다.

<sy-toast-item>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse알림이 표시 중인지 나타냅니다. show·close 메서드로 제어하세요.
'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight''bottomRight'항목 배치 방향입니다.
'neutral' | 'success' | 'error' | 'info' | 'warning''neutral'컴포넌트의 표시 스타일입니다.
booleanfalse닫기 버튼을 표시합니다.
numberundefined자동 닫힘까지의 시간(ms)입니다. 0이면 자동으로 닫지 않습니다.
booleanfalse같은 위치에서 새 알림을 먼저 표시합니다.
| 'none' | 'fade' | 'fade-scale' | 'zoom' | 'pop' | 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right' | 'slide-fade-top' | 'slide-fade-bottom' | 'slide-fade-left' | 'slide-fade-right' | 'reveal-top' | 'reveal-bottom' | 'reveal-left' | 'reveal-right' | 'flip-x' | 'flip-y' | 'bounce' | 'spin''none'Enter/exit animation type. `none` (default) toggles instantly.
'x-fast' | 'fast' | 'medium' | 'slow' | 'x-slow''fast'Animation playback speed token. Maps to `--transition-*` global tokens.

Methods

MethodReturnsDescription
Promise<void>알림을 표시합니다.
Promise<void>열린 패널을 닫습니다.

Slots

SlotDescription
icon 영역에 표시할 내용입니다.
header 영역에 표시할 내용입니다.
body 영역에 표시할 내용입니다.
footer 영역에 표시할 내용입니다.
Design SystemTab 이동 Enter 열기