본문으로 건너뛰기

Button

버튼은 사용자의 행동을 유도하는 기본적인 컴포넌트입니다. 다양한 스타일, 크기 및 상태를 지원하여 여러 상황에서 유연하게 사용할 수 있습니다.

인터랙티브 예제​

아래 UI에서 다양한 속성을 직접 변경하여 버튼의 모습을 확인해보세요.

labelstring
라벨 텍스트
classNamestring
추가 CSS 클래스
hierarchyselect
onlyIconboolean
아이콘만 표시
disabledboolean
비활성화 상태
leadingIconpreset
앞쪽에 표시될 요소
trailingIconpreset
뒤쪽에 표시될 요소
sizeselect
childrenreactNode
자식 요소

기본 사용법​

import { Button } from '@ncds/ui-admin';

function App() {
  return <Button label="기본 버튼" onClick={() => console.log('clicked')} />;
}

속성(Props)​

PropTypeDefaultDescription
labelstring필수버튼에 표시될 텍스트
classNamestring-추가 CSS 클래스
hierarchy'primary' | 'secondary' | 'tertiary' | 'danger''primary'버튼의 계층을 지정합니다.
disabledbooleanfalse버튼의 비활성화 상태
leadingIconIconSlotType | OtherProps-버튼 텍스트 앞에 표시될 아이콘
trailingIconIconSlotType | OtherProps-버튼 텍스트 뒤에 표시될 아이콘
onlyIconbooleanfalse텍스트 없이 아이콘만 표시할지 여부
size'sm' | 'md' | 'lg''md'버튼의 크기를 지정합니다.
childrenReactNode-버튼 내부에 추가될 자식 요소
asElementType<any>'button'버튼의 HTML 요소를 지정합니다.
refForwardedRef<HTMLElement>-버튼 요소에 대한 참조를 설정합니다.

앵커(<a>) 요소로 렌더링할 때의 추가 속성​

PropTypeDefaultDescription
hrefstring필수링크 대상 URL
targetHTMLAnchorElement['target']-링크가 열릴 타겟 (_self, _blank 등)

계층 구조​

버튼은 5가지 다른 스타일(hierarchy)을 지원합니다: primary, secondary, tertiary, link, destructive.

크기​

버튼의 크기를 조절할 수 있습니다: xxs, xs, sm, md.

비활성화 상태​

버튼을 비활성화 상태로 설정할 수 있습니다.

아이콘 사용​

버튼에 아이콘을 추가할 수 있습니다. leadingIcon(앞쪽 아이콘)과 trailingIcon(뒤쪽 아이콘)을 함께 사용할 수 있습니다.

아이콘만 있는 버튼​

onlyIcon 속성을 사용하여 텍스트 없이 아이콘만 있는 버튼을 만들 수 있습니다.

링크 버튼​

as 속성을 사용하여 버튼을 앵커(<a>) 요소로 렌더링할 수 있습니다.

NHN 커머스 방문하기NHN 커머스 방문하기

추가 스타일링​

className 속성을 사용하여 추가 스타일을 적용할 수 있습니다.