Button

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/button.css" />

Live

Primary
Secondary
Accent

States

Primary

Default
Hover
Active
Focus
Disabled

Secondary

Default
Hover
Active
Focus
Disabled

Accent

Default
Hover
Active
Focus
Disabled

Specs

Size Height Min-Width Padding Font Size Preview
Small 32px 80px 0 8px (--spacing-2) 14px (--font-size-caption)
Default 40px 120px 0 8px (--spacing-2) 18px (--font-size-body-base)
Large 48px 120px 0 3px (--spacing-3) 16px (--font-size-body-sm)

Code

<!-- Variants -->
<button class="button button--primary">Button</button>
<button class="button button--secondary">Button</button>
<button class="button button--accent">Button</button>

<!-- Sizes -->
<button class="button button--primary button--sm">Small</button>
<button class="button button--primary">Default</button>
<button class="button button--primary button--lg">Large</button>

<!-- Disabled -->
<button class="button button--primary" disabled>Disabled</button>

Classes

클래스 타입 설명
.button 루트 버튼 기본 스타일 (반드시 Variant 수정자와 함께 사용)
.button--primary 수정자 Primary — 초록 (--color-primary-main)
.button--secondary 수정자 Secondary — 파랑 (--color-secondary-main)
.button--accent 수정자 Accent — 빨강 (--color-accent-main)
.button--sm 수정자 Small — height 32px · min-width 80px · 14px
.button--lg 수정자 Large — height 48px · min-width 120px · 16px