Button

여러 스타일과 상태로 즉각적인 동작을 일으키는 버튼 컴포넌트입니다.

이럴 때 쓰세요. primary·contrast·warning·text 스타일과 비활성 상태, 아이콘까지 갖춘 클릭 가능한 동작 컨트롤이 필요할 때. 맨 <button>에 스타일을 입히는 대신 <r-button>을 쓰세요.

빠른 시작

기본 사용법

Button

<r-button>Button</r-button>

API 레퍼런스

프로퍼티

프로퍼티	타입	기본값	설명
`type`	`string`	`'default'`	버튼 종류: `default`, `primary`, `contrast`, `warning`, `text`
`disabled`	`boolean`	`false`	버튼을 비활성화할지 여부
`icon`	`string`	`''`	버튼 아이콘 이름
`effect`	`boolean`	`true`	클릭 물결 효과를 보일지 여부

버튼 종류 `type`

Primary Button

Warning Button

Text Button

Default Button

<r-button type="primary">Primary Button</r-button>
<r-button type="warning">Warning Button</r-button>
<r-button type="text">Text Button</r-button>
<r-button>Default Button</r-button>

primary는 (Geist 디자인 언어에서 온) 무채색 동작입니다. 라이트 모드에서는 흰 바탕에 검정, 다크 모드에서는 검정 바탕에 흰색입니다. 여기서 파랑은 브랜드 의미를 담지 않고 링크와 포커스 링을 위해 남겨 둡니다. --ran-color-primary* 토큰 (--ran-color-primary, -hover, -active, 반전 잉크용 --ran-color-primary-text) 을 따릅니다. 테마와 토큰을 보세요.

비활성 상태 `disabled`

Primary Button

Warning Button

Text Button

Default Button

<r-button type="primary" disabled>Primary Button</r-button>
<r-button type="warning" disabled>Warning Button</r-button>
<r-button type="text" disabled>Text Button</r-button>
<r-button disabled>Default Button</r-button>

아이콘 버튼 `icon`

💡 팁: 아이콘 위치를 세밀하게 잡아야 한다면 Icon 컴포넌트를 직접 쓰세요.

Default Button

Primary Button

<r-button type="default" icon="user">Default Button</r-button>
<r-button type="primary" icon="home">Primary Button</r-button>

효과 제어 `effect`

클릭 물결은 기본으로 켜져 있습니다. 물결 없는 밋밋한 버튼을 원하면 effect="false"를 지정하세요. 아래 두 버튼은 이 어트리뷰트만 다르므로 각각 눌러 비교해 볼 수 있습니다. 물결은 포인터 장치를 위한 효과이며 뷰포트 너비 1024px 부터만 그려집니다.

물결 있음 (기본)

물결 없음

<r-button type="primary" icon="home">물결 있음 (기본)</r-button>
<r-button type="primary" icon="home" effect="false">물결 없음</r-button>

물결을 끄는 값은 문자열 false 하나뿐입니다. effect="true"도, 그 밖의 어떤 값도 켜진 상태로 둡니다. 스크립트에서는 불리언 프로퍼티로 지정하세요: button.effect = false.

이벤트

<r-button onclick="handleClick()">Click Me</r-button>

<script>
  function handleClick() {
    console.log('Button clicked');
  }
</script>

스타일

<r-button>은 자체 CSS 커스텀 프로퍼티 43 개를 공개합니다: --ran-btn-background, --ran-btn-color, --ran-btn-border-color와 그 hover/active 변형, warning 변형 3 개, 그리고 테마에서 읽어 오는 의미 토큰들입니다.

/* 버튼 하나, 또는 어떤 범위 안의 모든 버튼 */
r-button {
  --ran-btn-background: var(--ran-color-bg-subtle);
  --ran-btn-hover-background: var(--ran-color-bg-hover);
  --ran-btn-border-radius: var(--ran-radius-full);
}

바꾸려는 것이 버튼 고유의 성질이 아니라면 의미 토큰을 쓰세요. --ran-color-primary를 덮어쓰면 여기뿐 아니라 어디서든 주요 동작의 모습이 바뀝니다.

Part: button · content

r-button::part(content) {
  letter-spacing: 0.02em;
}

전체 목록은 스타일 토큰에, 어떤 토큰을 고를지는 디자인 시스템에 있습니다.

권장 사항

주요 동작: type="primary"(무채색: 흰 바탕에 검정 / 검정 바탕에 흰색)
위험한 동작: type="warning"
보조 동작: type="text"
비활성 상태: 동작을 쓸 수 없을 때 disabled
아이콘: 알맞은 아이콘을 붙여 이해를 돕기