Button버튼

버튼은 주로 이메일 보내기, 문서 공유, 게시물 좋아요 등의 작업을 실행할 때 사용합니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/button.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { Button } from 'mdui/components/button.js';

사용 예시:

Button

<mdui-button>Button</mdui-button>

예시

형태

variant 속성을 사용해 버튼의 형태를 설정합니다.

Elevated

Filled

Tonal

Outlined

Text

<mdui-button variant="elevated">Elevated</mdui-button>
<mdui-button variant="filled">Filled</mdui-button>
<mdui-button variant="tonal">Tonal</mdui-button>
<mdui-button variant="outlined">Outlined</mdui-button>
<mdui-button variant="text">Text</mdui-button>

소스

전체 너비

full-width 속성을 추가하면 버튼이 부모 요소의 전체 너비를 차지할 수 있습니다.

Button

<mdui-button full-width>Button</mdui-button>

소스

아이콘

icon, end-icon 속성을 설정하면 버튼 왼쪽, 오른쪽에 각각 Material Icons 아이콘을 추가할 수 있습니다. icon, end-icon 슬롯을 통해 버튼 왼쪽, 오른쪽에 요소를 추가할 수도 있습니다.

Icon

Slot

<mdui-button icon="search" end-icon="arrow_forward">Icon</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>

소스

링크

href 속성을 설정하면 버튼이 링크로 변경되며, 이때 링크 관련 속성(download, target, rel)도 함께 사용합니다.

Link

<mdui-button href="https://www.mdui.org" target="_blank">Link</mdui-button>

소스

비활성화 및 로딩 상태

disabled 속성을 추가하면 버튼을 비활성화할 수 있습니다. loading 속성을 추가하면 버튼에 로딩 중 상태를 추가할 수 있습니다.

Disabled

Loading & Disabled

<mdui-button disabled>Disabled</mdui-button>
<mdui-button loading>Loading</mdui-button>
<mdui-button loading disabled>Loading & Disabled</mdui-button>

소스

API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`variant`	`variant`	`'elevated' \| 'filled' \| 'tonal' \| 'outlined' \| 'text'`	`'filled'`
버튼의 모양입니다. 사용 가능한 값은 다음과 같습니다: `elevated`: 그림자가 있는 버튼으로, 배경과 시각적으로 분리해야 할 때 적합합니다. `filled`: 시각적 강조 효과가 높으며 "저장", "확인" 등 중요 프로세스의 최종 작업에 적합합니다. `tonal`: `filled`와 `outlined`의 중간 정도 시각적 강조 효과를 가지며, 프로세스 중 "다음"과 같은 중간~높은 우선순위 작업에 적합합니다. `outlined`: 테두리가 있는 버튼으로, "뒤로"와 같이 중간 우선순위이면서 보조적인 작업에 적합합니다. `text`: 텍스트 버튼으로, 가장 낮은 우선순위 작업에 적합합니다.
`full-width`	`fullWidth`	`boolean`	`false`
부모 요소의 너비를 채울지 여부를 설정합니다.
`icon`	`icon`	`string`	-
왼쪽의 Material Icons 아이콘 이름입니다. `slot="icon"`을 통해서도 설정할 수 있습니다.
`end-icon`	`endIcon`	`string`	-
오른쪽의 Material Icons 아이콘 이름입니다. `slot="end-icon"`을 통해서도 설정할 수 있습니다.
`href`	`href`	`string`	-
링크의 대상 URL입니다. 이 속성을 설정하면 컴포넌트 내부가 `<a>` 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
`download`	`download`	`string`	-
다운로드할 링크 대상을 지정합니다. 참고: `href` 속성이 지정된 경우에만 유효합니다.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다: `_blank`: 새 창에서 링크 열기 `_parent`: 부모 프레임에서 링크 열기 `_self`: 기본값. 현재 프레임에서 링크 열기 `_top`: 전체 창에서 링크 열기 참고: `href` 속성이 지정된 경우에만 유효합니다.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다: `alternate`: 현재 문서의 대체 버전 `author`: 현재 문서 또는 글의 작성자 `bookmark`: 가장 가까운 상위 섹션으로의 영구 링크 `external`: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음 `help`: 관련 도움말 문서로 링크 `license`: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨 `me`: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄 `next`: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임 `nofollow`: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음 `noreferrer`: `Referer` 헤더가 포함되지 않음. `noopener`와 유사하게 동작합니다. `opener`: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, `target` 속성 값이 `_blank`인 경우) 보조 브라우징 컨텍스트를 생성함 `prev`: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임 `search`: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공 `tag`: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공 참고: `href` 속성이 지정된 경우에만 사용 가능합니다.
`autofocus`	`autofocus`	`boolean`	`false`
페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
`tabindex`	`tabIndex`	`number`	-
Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
`disabled`	`disabled`	`boolean`	`false`
비활성화할지 여부를 설정합니다.
`loading`	`loading`	`boolean`	`false`
로딩할지 여부를 설정합니다.
`name`	`name`	`string`	`''`
버튼의 이름이며, 폼 데이터와 함께 제출됩니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`value`	`value`	`string`	`''`
버튼의 초기값이며, 폼 데이터와 함께 제출됩니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
버튼의 유형입니다. 기본 유형은 `button`입니다. 사용 가능한 유형은 다음과 같습니다: `submit`: 버튼을 클릭하면 폼 데이터를 서버로 제출합니다. `reset`: 버튼을 클릭하면 폼의 모든 필드를 초기값으로 재설정합니다. `button`: 이 유형의 버튼은 기본 동작이 없습니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`form`	`form`	`string`	-
연결된 `<form>` 요소입니다. 이 속성 값은 동일한 페이지에 있는 `<form>` 요소의 `id`여야 합니다. 이 속성을 지정하지 않으면 이 요소는 `<form>` 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 `<form>` 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`formaction`	`formAction`	`string`	-
폼을 제출할 URL을 지정합니다. 이 속성이 지정되면 `<form>` 요소의 `action` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
폼을 서버에 제출할 때의 콘텐츠 유형을 지정합니다. 사용 가능한 값은 다음과 같습니다: `application/x-www-form-urlencoded`: 이 속성을 지정하지 않았을 때의 기본값 `multipart/form-data`: 폼에 `<input type="file">` 요소가 포함된 경우 사용 `text/plain`: HTML5에서 새로 추가되었으며, 디버깅용입니다. 이 속성이 지정되면 `<form>` 요소의 `enctype` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
폼 제출 시 사용할 HTTP 메서드를 지정합니다. 사용 가능한 값은 다음과 같습니다: `post`: 폼 데이터가 폼 콘텐츠에 포함되어 서버로 전송됩니다. `get`: 폼 데이터가 `?` 구분자와 함께 폼 URI에 추가되어 서버로 전송됩니다. 폼에 부작용이 없고 ASCII 문자만 포함된 경우 이 메서드를 사용합니다. 이 속성이 설정되면 `<form>` 요소의 `method` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
이 속성을 설정하면 폼 제출 시 폼 유효성 검사를 수행하지 않습니다. 이 속성을 설정하면 `<form>` 요소의 `novalidate` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
폼 제출 후 수신된 응답이 표시될 위치를 지정합니다. 사용 가능한 값은 다음과 같습니다: `_self`: 기본값, 현재 프레임에서 열기 `_blank`: 새 창에서 열기 `_parent`: 부모 프레임에서 열기 `_top`: 전체 창에서 열기 이 속성을 설정하면 `<form>` 요소의 `target` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
	`validity`	`ValidityState`	-
폼 유효성 검사 상태 객체입니다. 자세한 내용은 `ValidityState`를 참조하십시오.
	`validationMessage`	`string`	-
폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.

메서드

이름	매개변수	반환값
`click`		`void`
마우스 클릭을 시뮬레이션합니다.
`focus`	`options: FocusOptions` (선택사항)	`void`
현재 요소에 포커스를 설정합니다. 객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다: `preventScroll`: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 `true`로 설정하십시오.
`blur`		`void`
현재 요소에서 포커스를 제거합니다.
`checkValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다.
`reportValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다. 유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
`setCustomValidity`	`message: string`	`void`
사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.

이벤트

이름
`focus`
포커스를 얻었을 때 발생합니다.
`blur`
포커스를 잃었을 때 발생합니다.
`invalid`
폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.

Slots

이름
기본
버튼의 텍스트
`icon`
버튼 왼쪽의 요소
`end-icon`
버튼 오른쪽의 요소

CSS Parts

이름
`button`
내부의 `<button>` 또는 `<a>` 요소
`label`
버튼의 텍스트
`icon`
버튼 왼쪽의 아이콘
`end-icon`
버튼 오른쪽의 아이콘
`loading`
로딩 중 상태의 `<mdui-circular-progress>` 요소

CSS 사용자 정의 속성

이름
`--shape-corner`
컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.

이전 장

BottomAppBar 하단 앱 바

다음 장

ButtonIcon 아이콘 버튼