Button

Button (버튼 요소)

Button은 사용자가 액션을 실행하도록 유도하는 클릭 가능한 요소예요. 강조, 애니메이션, 아이콘, 색상, 크기 등 다양한 변형과 그룹 형태를 지원해요.

출처: 문서

본문

Types (유형)

Button (버튼)

표준 버튼이에요.

Follow (팔로우)

Button (버튼)
    
    
      Focusable (포커스 가능)

Emphasis (강조)

버튼은 서로 다른 수준의 강조를 보여주도록 포맷할 수 있어요.

Save (저장)
    
    
      Discard (버리기)

Okay (확인)
    
    
      Cancel (취소)

Animated (애니메이션)

버튼은 숨겨진 콘텐츠를 보여주도록 애니메이션할 수 있어요.

Next (다음)
      
        
      
    
    
      Shop (쇼핑)
      
        
      
    
    
      Sign-up for a Pro account (Pro 계정 가입)
      
        $12.99 a month (월 $12.99)

Labeled (라벨)

버튼은 라벨 옆에 나타날 수 있어요.

Icon (아이콘)

버튼은 아이콘만 가질 수 있어요.

Labeled Icon (라벨 아이콘)

버튼은 아이콘을 라벨로 사용할 수 있어요.

Pause (일시정지)
    
    
      
      Next (다음)
    
    
      
      Loading (로딩)

Basic (기본)

기본 버튼은 덜 두드러져요.

Add Friend (친구 추가)

Primary (기본)
    Secondary (보조)
    Positive (긍정)
    Negative (부정)

Red (빨강)
    Orange (주황)
    Yellow (노랑)
    Olive (올리브)
    Green (초록)
    Teal (청록)
    Blue (파랑)
    Violet (보라)
    Purple (자주)
    Pink (분홍)
    Brown (갈색)
    Grey (회색)
    Black (검정)

Tertiary (제3차)

테두리가 없는 덜 중요한 버튼이에요.

Cancel Action (동작 취소)

Primary (기본)
    Secondary (보조)
    Red (빨강)
    Orange (주황)
    Yellow (노랑)
    Olive (올리브)
    Green (초록)
    Teal (청록)
    Blue (파랑)
    Violet (보라)
    Purple (자주)
    Pink (분홍)
    Brown (갈색)
    Grey (회색)
    Black (검정)

Inverted (반전)

버튼은 어두운 배경에 나타나도록 포맷할 수 있어요.

Standard (표준)
      Primary (기본)
      Secondary (보조)
      Red (빨강)
      Orange (주황)
      Yellow (노랑)
      Olive (올리브)
      Green (초록)
      Teal (청록)
      Blue (파랑)
      Violet (보라)
      Purple (자주)
      Pink (분홍)
      Brown (갈색)
      Grey (회색)
      Black (검정)

Basic (기본)
      Primary (기본)
      Secondary (보조)
      Basic Red (기본 빨강)
      Basic Orange (기본 주황)
      Basic Yellow (기본 노랑)
      Basic Olive (기본 올리브)
      Basic Green (기본 초록)
      Basic Teal (기본 청록)
      Basic Blue (기본 파랑)
      Basic Violet (기본 보라)
      Basic Purple (기본 자주)
      Basic Pink (기본 분홍)
      Basic Brown (기본 갈색)
      Basic Grey (기본 회색)
      Basic Black (기본 검정)

Groups (그룹)

Buttons (버튼)

버튼은 그룹으로 함께 존재할 수 있어요.

One (하나)
      Two (둘)
      Three (셋)

Icon Buttons (아이콘 버튼)

버튼 그룹은 아이콘 그룹을 보여줄 수 있어요.

Content (콘텐츠)

Conditionals (조건부)

버튼 그룹은 조건부를 포함할 수 있어요.

Cancel (취소)
      
      Save (저장)

un
      
      deux

States (상태)

Active (활성)

버튼은 현재 활성 사용자 선택임을 보여줄 수 있어요.

Follow (팔로우)

Disabled (비활성)

버튼은 현재 상호작용할 수 없음을 보여줄 수 있어요.

Followed (팔로우함)

Loading (로딩)

버튼은 로딩 표시기를 보여줄 수 있어요.

Loading (로딩)
    Loading (로딩)
    Loading (로딩)
    Loading (로딩)
    
    
    Loading (로딩)
    Loading (로딩)
    Loading (로딩)
    Loading (로딩)
    
    
    Loading (로딩)
    Loading (로딩)
    Loading (로딩)
    Loading (로딩)

Variations (변형)

Social (소셜)

버튼은 소셜 웹사이트로 연결되도록 포맷할 수 있어요.

Facebook
    
    
      
      Twitter
    
    
      
      Google Plus
    
    
      
      VK
    
    
      
      LinkedIn
    
    
      
      Instagram
    
    
      
      YouTube
    
    
      
      WhatsApp
    
    
      
      Telegram

Size (크기)

버튼은 다른 크기를 가질 수 있어요.

Mini
    
    
      Tiny
    
    
      Small
    
    
      Medium
    
    
      Large
    
    
      Big
    
    
      Huge
    
    
      Massive

Floated (부동)

버튼은 컨테이너의 왼쪽이나 오른쪽에 정렬될 수 있어요.

Right Floated (오른쪽 부동)
    Left Floated (왼쪽 부동)

Colored (색상)

버튼은 다른 색상을 가질 수 있어요.

Red (빨강)
    Orange (주황)
    Yellow (노랑)
    Olive (올리브)
    Green (초록)
    Teal (청록)
    Blue (파랑)
    Violet (보라)
    Purple (자주)
    Pink (분홍)
    Brown (갈색)
    Grey (회색)
    Black (검정)

Compact (컴팩트)

버튼은 더 좁은 공간에 맞도록 패딩을 줄일 수 있어요.

Hold (유지)
    
    
      
    
    
      
      Pause (일시정지)

Toggle (토글)

버튼은 켜고 끄도록 포맷할 수 있어요.

Vote (투표)

Positive (긍정)

버튼은 긍정적인 결과를 암시할 수 있어요.

Positive Button (긍정 버튼)

Negative (부정)

버튼은 부정적인 결과를 암시할 수 있어요.

Negative Button (부정 버튼)

Fluid (플루이드)

버튼은 컨테이너의 너비를 차지할 수 있어요.

Fits container (컨테이너에 맞음)

Circular (원형)

버튼은 원형이 될 수 있어요.

Vertically Attached (세로 부착)

버튼은 다른 콘텐츠의 위나 아래에 부착될 수 있어요.

Top (위)
    
    
    Bottom (아래)

One (하나)
        Two (둘)
    
    
      
    
    
        One (하나)
        Two (둘)

Horizontally Attached (가로 부착)

버튼은 다른 콘텐츠의 왼쪽이나 오른쪽에 부착될 수 있어요.

Left (왼쪽)
    Right (오른쪽)

Group Variations (그룹 변형)

Vertical Buttons (세로 버튼)

그룹은 세로로 나타나도록 포맷할 수 있어요.

Feed (피드)
      Messages (메시지)
      Events (이벤트)
      Photos (사진)

Stackable Buttons (스택 가능한 버튼)

가로 그룹은 모바일 기기에서 자동으로 스택될 수 있어요.

Feed (피드)
      Messages (메시지)
      Events (이벤트)
      Photos (사진)

Icon Buttons (아이콘 버튼)

그룹은 아이콘으로 포맷할 수 있어요.

Labeled Icon Buttons (라벨 아이콘 버튼)

그룹은 라벨 아이콘으로 포맷할 수 있어요.

Pause (일시정지)
      
      
        
        Play (재생)
      
      
        
        Shuffle (셔플)

Mixed Group (혼합 그룹)

그룹은 여러 버튼 유형을 함께 사용하도록 포맷할 수 있어요.

Back (뒤로)
      
      
        
        Stop (정지)
      
      
        
        Forward (앞으로)

Equal Width (동일 너비)

그룹은 너비를 균등하게 나눌 수 있어요.

Overview (개요)
      Specs (사양)
      Warranty (보증)
      Reviews (리뷰)
      Support (지원)
    
    
    
      Overview (개요)
      Specs (사양)
      Support (지원)

Colored Buttons (색상 버튼)

그룹은 공통 색상을 가질 수 있어요.

One (하나)
      Two (둘)
      Three (셋)

Basic Buttons (기본 버튼)

버튼 그룹은 덜 두드러질 수 있어요.

One (하나)
      Two (둘)
      Three (셋)
    
    
    
      One (하나)
      Two (둘)
      Three (셋)

One (하나)
      Two (둘)
      Three (셋)

Group Sizes (그룹 크기)

그룹은 공통 크기를 가질 수 있어요.

One (하나)
      Two (둘)
      Three (셋)

One (하나)
      
      Two (둘)

Wrapping Buttons (줄바꿈 버튼)

그룹 버튼은 사용 가능한 전체 너비를 공유하며 자동으로 줄바꿈할 수 있어요.

One (하나)
      Two (둘)
      Three (셋)
      Four (넷)
      Five (다섯)
      Six (여섯)
      Seven (일곱)
      Eight (여덟)
      Nine (아홉)
      Ten (열)
      Eleven (열하나)
      Twelve (열둘)
      Thirteen (열셋)
      Fourteen (열넷)
      Fifteen (열다섯)
      Sixteen (열여섯)
      Seventeen (열일곱)
      Eighteen (열여덟)
      Nineteen (열아홉)
      Twenty (스물)

Spaced Buttons (간격 버튼)

그룹 안의 버튼은 서로 붙어 보이지 않도록 마진을 자동으로 가질 수 있어요. 특히 반응형 레이아웃에서 wrapping과 함께 사용할 때 유용해요.

One (하나)
      Two (둘)
      Three (셋)
      Four (넷)
      Five (다섯)
      Six (여섯)
      Seven (일곱)
      Eight (여덟)
      Nine (아홉)
      Ten (열)
      Eleven (열하나)
      Twelve (열둘)
      Thirteen (열셋)
      Fourteen (열넷)
      Fifteen (열다섯)
      Sixteen (열여섯)
      Seventeen (열일곱)
      Eighteen (열여덟)
      Nineteen (열아홉)
      Twenty (스물)

Circular Buttons (원형 버튼)

그룹 안의 원형 버튼은 서로 붙어 보이지 않도록 약간의 마진을 받아요.

One (하나)
      Two (둘)
      Three (셋)
      Four (넷)

더 알아보기 (Learn more)

Button은 가장 기본적인 액션 요소예요. primary/secondary/basic 강조와 positive/negative 색상으로 액션의 중요도를 표현하고, 그룹 변형으로 버튼들을 묶어 일관된 컨트롤로 만들 수 있어요.