Button

Button (버튼)

버튼은 어떤 디자인에서든 필수 요소예요. 페이지의 상호작용(interactive) 요소답게 보이고, 또 동작하도록 설계되어 있어요.

출처: 문서

본문

<button class="button">Button</button>

button 클래스는 다음 요소들에 사용할 수 있어요.

• <a> 앵커 링크
• <button> 폼 버튼
• <input type="submit"> 제출 인풋
• <input type="reset"> 리셋 인풋

Example

<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input" />
<input class="button" type="reset" value="Reset input" />

색상 (Colors)

버튼은 $colors Sass map에서 정의한 모든 색상을 지원해요.

Example

<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
<button class="button is-ghost">Ghost</button>

Example

<div class="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-link">Link</button>
</div>

<div class="buttons">
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>
</div>

각 색상에는 라이트(light) 버전도 있어요. 주 컬러 수정자에 is-light 수정자를 붙이면 버튼의 라이트 버전을 적용할 수 있어요.

Example

<div class="buttons">
  <button class="button is-primary is-light">Primary</button>
  <button class="button is-link is-light">Link</button>
</div>

<div class="buttons">
  <button class="button is-info is-light">Info</button>
  <button class="button is-success is-light">Success</button>
  <button class="button is-warning is-light">Warning</button>
  <button class="button is-danger is-light">Danger</button>
</div>

다크(dark) 버전도 있어요. is-dark 수정자를 붙이면 돼요.

Example

<div class="buttons">
  <button class="button is-primary is-dark">Primary</button>
  <button class="button is-link is-dark">Link</button>
</div>

<div class="buttons">
  <button class="button is-info is-dark">Info</button>
  <button class="button is-success is-dark">Success</button>
  <button class="button is-warning is-dark">Warning</button>
  <button class="button is-danger is-dark">Danger</button>
</div>

크기 (Sizes)

버튼에는 4가지 크기가 있어요.

• small
• normal
• medium
• large

기본 크기는 normal이지만, 버튼을 normal 크기로 되돌려야 할 때를 위해 is-normal 수정자도 있어요.

Example

<button class="button is-small">Small</button>
<button class="button">Default</button>
<button class="button is-normal">Normal</button>
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>

여러 버튼을 buttons 부모로 감싸고 다음 3가지 수정자 중 하나를 적용하면 한 번에 크기를 바꿀 수 있어요.

• buttons are-small
• buttons are-medium
• buttons are-large

Example

<div class="buttons are-medium">
  <button class="button">All</button>
  <button class="button">Medium</button>
  <button class="button">Size</button>
</div>

일부 버튼만 크기를 바꾸고 싶다면 그 버튼들에만 수정자 클래스를 적용하면 돼요.

예를 들어 모든 버튼을 small로 하되 하나만 normal 크기로 남기고 싶다면 이렇게 하면 돼요.

Example

<div class="buttons are-small">
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button is-normal">Normal</button>
  <button class="button">Small</button>
</div>

반응형 크기 (Responsive sizes)

브레이크포인트마다 다른 버튼 크기를 원한다면 Bulma의 반응형 버튼을 사용할 수 있어요. is-responsive 수정자를 붙이면 돼요.

<button class="button is-responsive">
  Default
</button>

<button class="button is-small is-responsive">
  Small
</button>

<button class="button is-normal is-responsive">
  Normal
</button>

<button class="button is-medium is-responsive">
  Medium
</button>

<button class="button is-large is-responsive">
  Large
</button>

크기는 $button-responsive-sizes Sass 변수를 덮어써서 커스터마이즈할 수 있어요.

너비 (Displays)

Example

<button class="button is-small is-fullwidth">Small</button>
<button class="button is-fullwidth">Normal</button>
<button class="button is-medium is-fullwidth">Medium</button>
<button class="button is-large is-fullwidth">Large</button>

스타일 (Styles)

Outlined (윤곽선만 있는)

Example

<button class="button is-link is-outlined">Outlined</button>
<button class="button is-primary is-outlined">Outlined</button>
<button class="button is-info is-outlined">Outlined</button>
<button class="button is-success is-outlined">Outlined</button>
<button class="button is-danger is-outlined">Outlined</button>

Inverted (텍스트 색과 배경 색이 서로 바뀜)

<button class="button is-link is-inverted">Inverted</button>
<button class="button is-primary is-inverted">Inverted</button>
<button class="button is-info is-inverted">Inverted</button>
<button class="button is-success is-inverted">Inverted</button>
<button class="button is-danger is-inverted">Inverted</button>

Rounded buttons (둥근 버튼)

<button class="button is-rounded">Rounded</button>
<button class="button is-link is-rounded">Rounded</button>
<button class="button is-primary is-rounded">Rounded</button>
<button class="button is-info is-rounded">Rounded</button>
<button class="button is-success is-rounded">Rounded</button>
<button class="button is-danger is-rounded">Rounded</button>

상태 (States)

Bulma는 버튼의 여러 상태를 스타일링해요. 각 상태는 pseudo-class와 CSS 클래스로 모두 사용할 수 있어요.

• :hover 와 is-hovered
• :focus 와 is-focused
• :active 와 is-active

이렇게 하면 실제로 상태를 트리거하지 않고도 특정 상태의 스타일을 얻을 수 있어요.

Normal

<button class="button">Button</button>

Hover

<button class="button is-hovered">Hover</button>

Focus

<button class="button is-focused">Focus</button>

Active

<button class="button is-active">Active</button>

Loading

is-loading 수정자를 붙이면 버튼 안에 로딩 스피너가 표시돼요. 버튼에 아이콘이나 다른 내용이 들어 있으면 가려지니 주의하세요.

<button class="button is-loading">Loading</button>

Static

is-static 클래스는 버튼을 상호작용할 수 없게 만듭니다. 주로 편집할 수 없는 텍스트를 보여줄 때 사용해요.

<button class="button is-static">Static</button>

Disabled

disabled 속성을 사용하면 네이티브하게 비활성화할 수 있어요.

<button class="button" disabled>Disabled</button>

Font Awesome 아이콘과 함께 사용하기

버튼 안에 아이콘과 텍스트를 함께 넣을 수 있어요. 아이콘은 icon is-small 스팬으로 감싸 주세요.

<button class="button is-success">
  <span class="icon is-small">
    <i class="fas fa-check"></i>
  </span>
  <span>Save</span>
</button>

더 알아보기 (Learn more)

• Content 요소
• Icon 요소