Banner

<sy-banner-message
  variant="info"
  header="새 기능 안내"
  message="이제 프로젝트를 팀과 공유할 수 있습니다."
  showicon
></sy-banner-message>

<sy-banner-message
  variant="warning"
  header="연결 상태 확인"
  message="변경 내용을 저장하기 전에 연결 상태를 확인하세요."
  showicon
></sy-banner-message>

<sy-banner-message
  variant="error"
  header="저장하지 못했습니다"
  message="입력한 내용은 유지됩니다. 연결을 확인하고 다시 시도하세요."
  showicon
></sy-banner-message>

<sy-banner-message
  variant="success"
  header="설정 완료"
  message="새 설정을 사용할 준비가 되었습니다."
  showicon
  closable
></sy-banner-message>

<sy-banner-message
  header="프로젝트 초대"
  message="초대 내용을 확인하세요."
  showicon
>
  <sy-button slot="footer" size="small">초대 확인</sy-button>
</sy-banner-message>

<sy-banner-message
  variant="success"
  header="서비스 안내"
  message="변경 사항이 적용되었습니다."
  showicon
  closable
  id="supplement-1"
></sy-banner-message>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "variant": "success"
  });
</script>