Buttons

Primary Button은 제출, 확인, 구매, 등록 등 주요 행동 유도, 결정할 때 사용합니다.

Buttons

Primary Button은 제출, 확인, 구매, 등록 등 주요 행동 유도, 결정할 때 사용합니다.

Buttons

Primary Button은 제출, 확인, 구매, 등록 등 주요 행동 유도, 결정할 때 사용합니다.

Primary Button

ESSENTIAL

  1. 레이블


OPTIONAL

  1. 아이콘

Primary Button

ESSENTIAL

  1. 레이블


OPTIONAL

  1. 아이콘

Primary Button

ESSENTIAL

  1. 레이블


OPTIONAL

  1. 아이콘

State

Control

state

default

hover

disabled

Left Icon

Right Icon

Control

state

default

hover

disabled

Left Icon

Right Icon

Control

state

default

hover

disabled

Left Icon

Right Icon

Properties

Content

Properties

Content

Properties

Content

Spec

Content

Spec

Content

Spec

Width

모바일 환경에서는 뷰포트의 100%로 설정합니다.

Responsive Behavior

콘텐츠 양이 많을 경우 Body 영역 내에서 스크롤이 가능합니다.

Secondary Button

ESSENTIAL

ㅏㅜㅏㅓㅏㅏ

OPTIONAL

Secondary Button

ESSENTIAL

ㅏㅜㅏㅓㅏㅏ

OPTIONAL

Secondary Button

ESSENTIAL

ㅏㅜㅏㅓㅏㅏ

OPTIONAL

State

Control

state

default

hover

disabled

Left Icon

Right Icon

Control

state

default

hover

disabled

Left Icon

Right Icon

Control

state

default

hover

disabled

Left Icon

Right Icon

Properties

header

false, true

footer

false, true

Properties

header

false, true

footer

false, true

Properties

header

false, true

footer

false, true

Usage

Do

헤더의 닫기 버튼(close)을 항상 제공하여 사용자가 언제든지 닫을 수 있게 합니다.


Do

1개만 선택이 가능한 경우에는 [적용하기] 버튼 없이 바로 적용할 수 있습니다.

Don't

다중 선택의 경우 [적용하기] 버튼을 없애면 안됩니다.

Usage

Do

헤더의 닫기 버튼(close)을 항상 제공하여 사용자가 언제든지 닫을 수 있게 합니다.


Do

1개만 선택이 가능한 경우에는 [적용하기] 버튼 없이 바로 적용할 수 있습니다.

Don't

다중 선택의 경우 [적용하기] 버튼을 없애면 안됩니다.

Usage

Do

헤더의 닫기 버튼(close)을 항상 제공하여 사용자가 언제든지 닫을 수 있게 합니다.


Do

1개만 선택이 가능한 경우에는 [적용하기] 버튼 없이 바로 적용할 수 있습니다.

Don't

다중 선택의 경우 [적용하기] 버튼을 없애면 안됩니다.

Tertiary Button

ESSENTIAL


OPTIONAL

Tertiary Button

ESSENTIAL


OPTIONAL

Tertiary Button

ESSENTIAL


OPTIONAL

State

Control

state

default

hover

disabled

Left Icon

Right Icon

Control

state

default

hover

disabled

Left Icon

Right Icon

Control

state

default

hover

disabled

Left Icon

Right Icon

Properties

header

false, true

footer

false, true

Properties

header

false, true

footer

false, true

Properties

header

false, true

footer

false, true

Text Button

ESSENTIAL


OPTIONAL

Text Button

ESSENTIAL


OPTIONAL

Text Button

ESSENTIAL


OPTIONAL

State

Control

state

default

hover

disabled

Left Icon

Right Icon

Control

state

default

hover

disabled

Left Icon

Right Icon

Control

state

default

hover

disabled

Left Icon

Right Icon

Properties

header

false, true

footer

false, true

Properties

header

false, true

footer

false, true

Properties

header

false, true

footer

false, true

Icon Button

ESSENTIAL


OPTIONAL

Icon Button

ESSENTIAL


OPTIONAL

Icon Button

ESSENTIAL


OPTIONAL

State

Control

state

default

hover

disabled

Control

state

default

hover

disabled

Control

state

default

hover

disabled

Properties

header

false, true

footer

false, true

Properties

header

false, true

footer

false, true

Properties

header

false, true

footer

false, true

©Codeit

Contact Us

©Codeit

Contact Us

©Codeit

Contact Us