Button

저장, 제출, 다음 단계. 사용자가 하려는 일을 명확한 동작으로 연결합니다.

<sy-button>설치 안내 기본 사용법

Live preview

저장하기

버튼을 눌러 동작을 확인하세요.

텍스트 스타일 크기 아이콘

비활성화로딩전체 너비

코드 보기

HTML

<sy-button variant="primary" size="medium">저장하기</sy-button>

사용 가이드

사용자의 선택을 실행할 때 사용합니다. 화면 이동에는 링크를 사용하고, 한 작업 영역에서는 가장 중요한 동작을 먼저 강조하세요.

주요 동작

저장·제출에는 primary로 다음 행동을 명확하게.

보조 동작

취소·이전 단계에는 default 또는 secondary.

가벼운 동작

부가 기능에는 borderless로 강조를 줄이세요.

처리 중에는 loading, 실행할 수 없을 때는 disabled로 상태를 알려주세요.

예제

스타일

주요 동작에는 primary, 보조 동작에는 default 또는 secondary를 사용합니다. borderless는 가벼운 동작에 적합합니다.

Primary

Default

Secondary

Borderless

코드 보기

HTML

<sy-button variant="primary">Primary</sy-button>
<sy-button variant="default">Default</sy-button>
<sy-button variant="secondary">Secondary</sy-button>
<sy-button variant="borderless">Borderless</sy-button>

아이콘

기본 슬롯에 SVG를 텍스트 앞이나 뒤에 배치합니다. 아이콘만 사용할 때는 icon-only와 이름을 설명하는 tooltip을 지정합니다.

새 항목

다음 단계

코드 보기

HTML

<sy-button variant="primary">
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.8"
    stroke-linecap="round"
    aria-hidden="true"
  >
    <path d="M12 5v14M5 12h14" />
  </svg>
  새 항목
</sy-button>

<sy-button>
  다음 단계
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.8"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <path d="M5 12h14m-6-6 6 6-6 6" />
  </svg>
</sy-button>

<sy-button icon-only tooltip="항목 추가">
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.8"
    stroke-linecap="round"
    aria-hidden="true"
  >
    <path d="M12 5v14M5 12h14" />
  </svg>
</sy-button>

크기

small 24px, medium 32px, large 40px. 화면의 밀도에 맞게 선택합니다. 기본값은 medium입니다.

Small

Medium

Large

코드 보기

HTML

<sy-button variant="primary" size="small">Small</sy-button>
<sy-button variant="primary" size="medium">Medium</sy-button>
<sy-button variant="primary" size="large">Large</sy-button>

상태

disabled는 사용할 수 없는 동작, loading은 처리 중인 동작을 표시합니다. 두 상태 모두 추가 클릭을 차단합니다.

저장하기

저장 중

코드 보기

HTML

<sy-button variant="primary">저장하기</sy-button>
<sy-button variant="primary" disabled>저장하기</sy-button>
<sy-button variant="primary" loading>저장 중</sy-button>

전체 너비

full-width를 지정하면 부모 영역의 너비를 채웁니다. 폼 제출이나 좁은 화면의 주요 동작에 사용할 수 있습니다.

계속하기

코드 보기

HTML

<sy-button variant="primary" full-width>계속하기</sy-button>

아이콘 버튼 툴팁

아이콘 전용 버튼에 마우스를 올리거나 포커스하면 동작을 설명하는 툴팁을 표시합니다.

코드 보기

HTML

<sy-button icon-only tooltip="항목 추가"><svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.8"
    stroke-linecap="round"
    aria-hidden="true"
  >
    <path d="M12 5v14M5 12h14" />
  </svg></sy-button>

기능별 예제

14개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview (Dev)

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Disabled

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Form validation

필수 입력이 비어 있으면 일반 제출은 차단됩니다. formnovalidate를 지정한 버튼은 이 검사를 건너뜁니다. 임시 저장처럼 미완성 입력도 받아야 할 때 사용하세요. 서버의 데이터 검증은 별도로 유지해야 합니다.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Full Width

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Loading

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Size

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Type

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Variant

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

메서드 · Method / setBlur&setFocus

예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

메서드 · Method / setClick

예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

이벤트 · Click

컴포넌트를 조작하면 아래 실행 화면에 이벤트 이름과 전달 값이 표시됩니다.

코드 보기

HTML

예제를 불러오고 있습니다.

슬롯 ·

컴포넌트 안에 배치한 내용과 코드의 slot 이름을 함께 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

사용 예제 · 아이콘 버튼 툴팁

아이콘 전용 버튼에 마우스를 올리거나 포커스하면 동작을 설명하는 툴팁을 표시합니다.

코드 보기

HTML

<sy-button icon-only tooltip="항목 추가"><svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.8"
    aria-hidden="true"
  >
    <path d="M12 5v14M5 12h14" />
  </svg></sy-button>

API reference

이름에 마우스를 올리거나 키보드로 선택하면 적용 예제를 볼 수 있습니다. 터치 화면에서는 이름을 눌러보세요.

Properties

Type	Default	Description
`default \| primary \| secondary \| borderless`	`default`	버튼의 시각적 스타일
`small \| medium \| large`	`medium`	버튼 크기
`boolean`	`false`	클릭과 키보드 활성화 차단
`boolean`	`false`	진행 표시 및 추가 클릭 차단
`boolean`	`false`	부모 영역 너비 채우기
`boolean`	`false`	아이콘 전용 버튼 설정. 슬롯에는 아이콘만 배치
`string`	`""`	기본 툴팁. 아이콘 전용 버튼의 접근 가능한 이름
`button \| submit \| reset`	`button`	일반 동작, 폼 제출 또는 초기화
`boolean`	`false`	제출 시 폼 유효성 검사 건너뛰기

Slots

Name	Description
	버튼의 텍스트와 아이콘. 별도의 이름 없이 자식 요소로 넣습니다.

Methods

Method	Returns	Description
	`Promise<void>`	내부 버튼의 클릭 실행. disabled·loading 상태에서는 실행되지 않음
	`Promise<void>`	내부 버튼으로 포커스 이동
	`Promise<void>`	내부 버튼의 포커스 해제
	`Promise<void>`	그룹 방향과 첫·마지막 버튼의 모양을 갱신합니다. 일반 사용에서는 `sy-button-group`이 관리하므로 버튼을 그룹 안에 배치하세요.

Events

Event	Description
	일반 버튼의 표준 클릭 이벤트. `addEventListener`로 구독합니다. 폼 제출은 폼의 `submit` 이벤트에서 처리하세요.

아래 예제는 id="action-button"인 버튼을 대상으로 합니다.

JavaScript

const button = document.querySelector('#action-button');
await customElements.whenDefined('sy-button');
button.addEventListener('click', () => {
  console.log('버튼을 클릭했습니다.');
});
await button.setFocus();