Podo UI

Podo UI

버튼

Podo UI의 버튼 컴포넌트와 다양한 변형 사용법을 안내합니다

기본 사용법

HTML button 태그에 컬러 클래스를 추가하여 버튼을 만들 수 있습니다. 클래스명만으로 다양한 스타일의 버튼을 구현할 수 있습니다.

HTML
<button>기본 버튼</button>
<button class="primary">Primary 버튼</button>
<button class="danger">Danger 버튼</button>
<button disabled>비활성화 버튼</button>
실제 예제:

버튼 변형

7가지 시맨틱 컬러로 다양한 목적의 버튼을 만들 수 있습니다:

Primary

주요 액션

Default

기본 버튼

Default Deep

진한 기본 버튼

Info

정보성 액션

Link

링크형 액션

Success

성공/완료 액션

Warning

경고 액션

Danger

위험/삭제 액션

HTML
<button class="primary">Primary</button>
<button>Default</button>
<button class="default-deep">Default Deep</button>
<button class="info">Info</button>
<button class="link">Link</button>
<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="danger">Danger</button>

버튼 스타일

각 컬러 변형마다 4가지 스타일(Solid, Fill, Border, Text)을 사용할 수 있습니다:

Solid

기본 스타일

<button class="primary">Primary</button>
<button>Default</button>
<button class="default-deep">Default Deep</button>
<button class="info">Info</button>
<button class="link">Link</button>
<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="danger">Danger</button>

Fill

연한 배경

<button class="primary fill">Primary</button>
<button class="fill">Default</button>
<button class="default-deep fill">Default Deep</button>
<button class="info fill">Info</button>
<button class="link fill">Link</button>
<button class="success fill">Success</button>
<button class="warning fill">Warning</button>
<button class="danger fill">Danger</button>

Border

테두리만

<button class="primary border">Primary</button>
<button class="border">Default</button>
<button class="default-deep border">Default Deep</button>
<button class="info border">Info</button>
<button class="link border">Link</button>
<button class="success border">Success</button>
<button class="warning border">Warning</button>
<button class="danger border">Danger</button>

Text

텍스트만

<button class="primary text">Primary</button>
<button class="text">Default</button>
<button class="default-deep text">Default Deep</button>
<button class="info text">Info</button>
<button class="link text">Link</button>
<button class="success text">Success</button>
<button class="warning text">Warning</button>
<button class="danger text">Danger</button>

버튼 크기

CSS를 사용하여 버튼의 크기를 조절할 수 있습니다:

HTML
<button class="primary xxs">
  xxs Button
</button>

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

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

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

<button class="primary lg">
  lg Button
</button>
실제 예제:

텍스트 정렬

버튼 내 텍스트의 정렬을 왼쪽, 가운데, 오른쪽으로 설정할 수 있습니다. 기본값은 가운데 정렬입니다:

HTML
<!-- 가운데 정렬 -->
<button class="primary">가운데 정렬</button>

<!-- 왼쪽 정렬 -->
<button class="primary text-left">왼쪽 정렬</button>

<!-- 오른쪽 정렬 -->
<button class="primary text-right">오른쪽 정렬</button>
실제 예제:
아이콘과 함께 사용:

아이콘과 함께 사용

버튼 내부에 아이콘을 추가하여 더욱 직관적인 UI를 만들 수 있습니다:

HTML
<button class="primary">
  <i class="icon-plus"></i>
  새로 만들기
</button>

<button class="success">
  <i class="icon-check"></i>
  확인
</button>

<button class="danger">
  <i class="icon-trash"></i>
  삭제
</button>

<!-- Text style -->
<button class="primary text">
  <i class="icon-plus"></i>
  새로 만들기
</button>

<!-- Icon only -->
<button class="primary">
  <i class="icon-search"></i>
</button>
실제 예제:

비활성화 상태

disabled 속성을 추가하여 버튼을 비활성화할 수 있습니다:

HTML
<button class="primary" disabled>Disabled</button>
<button class="success" disabled>Disabled</button>
<button class="danger" disabled>Disabled</button>
실제 예제:

버튼 그룹

여러 버튼을 그룹으로 묶어 사용할 수 있습니다:

HTML
<div style="display: flex; gap: 0.5rem;">
  <button class="primary">저장</button>
  <button class="default">취소</button>
</div>

<div style="display: flex; gap: 0.5rem;">
  <button class="primary">
    <i class="icon-arrow-left"></i>
    이전
  </button>
  <button class="primary">
    다음
    <i class="icon-arrow-right"></i>
  </button>
</div>
실제 예제:

SCSS에서 사용하기

SCSS 모듈에서 버튼 스타일을 커스터마이징할 수 있습니다:

component.module.scss
@use 'podo-ui/mixin' as *;

.customButton {
  display: flex;
  align-items: center;
  gap: s(2);
  padding: s(3) s(5);
  background: color(primary-base);
  color: color(primary-reverse);
  border: none;
  border-radius: r(3);
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background: color(primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &:active {
    background: color(primary-pressed);
    transform: translateY(0);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  i {
    font-size: 16px;
  }
}

.iconOnlyButton {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: color(primary-fill);
  color: color(primary-base);
  border: 1px solid color(primary-outline);
  border-radius: r(2);
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background: color(primary-base);
    color: color(primary-reverse);
  }
}

전체 변형 쇼케이스

모든 컬러 변형과 스타일을 한눈에 확인하세요:

Primary주요 액션
Default기본 버튼
Default Deep진한 기본 버튼
Info정보성 액션
Link링크형 액션
Success성공/완료 액션
Warning경고 액션
Danger위험/삭제 액션