Button Page

기본

<button class="ga-button">기본</button>

Element Type

클레스

<button class="ga-button">태그</button>
<div class="ga-button">클레스</div>

Brand Color

<button class="ga-button { BRAND | STATUS }">Color</button>

Colors

<button class="ga-button { COLORS }">Color</button>

Disabled

Disabled(attr)

<button class="ga-button disabled">Disabled(class)</button>
<button class="ga-button" disabled>Disabled(attr)</button>

Border

Border(Primary)

<button class="ga-button border">Disabled(class)</button>
<button class="ga-button" border>Disabled(attr)</button>

Equal

저장

취소

보기

Frog UI System

저장

취소

보기

FROG UI System

<button class="ga-button equal">Equal</button>
<button class="ga-button equal large" disabled>Equal L</button>

Fluid

꽉차게

<button class="ga-button fluid">Fluid</button>

Compact

조그맣게

코드

<button class="ga-button compact">Compact</button>

Outline

테두리

<button class="ga-button outline">Outline</button>

Icon (* required - Xeicon 2.3.3)

<button class="ga-button icon">
    <i class="fa fa-icon"></i>
</button>

Circle

동그랗게

A

B

<button class="ga-button circle">Circle</button>

Icon

왼쪽

오른쪽

<button class="ga-button">
    <i class="icon left fa fa-icon"></i>
    완쪽
</button>
<button class="ga-button">
    오른쪽
    <i class="icon right fa fa-icon"></i>
</button>

With Badge

Best

Sale

<button class="ga-button badge">
    <sapn class="in-badge">B</span>
    버튼 텍스트
</button>
<!-- badge 사용 시 fluid 속성을 사용 할 수 없습니다 -->

Text

텍스트

업데이트

123

<button class="ga-button text">
    버튼 텍스트
</button>

Buttons

재생

정지

일시정지

위

중앙

아래

시작

정지

일시정지

<div class="ga-buttons">
    <div class="ga-button selected">BTN 1</div>
    <div class="ga-button">BTN 2</div>
    <div class="ga-button">BTN 3</div>
    <div class="ga-button">BTN 4</div>
    ...
 </div>