Primary Button
ESSENTIAL
레이블
OPTIONAL
아이콘
Buttons
Primary Button은 제출, 확인, 구매, 등록 등 주요 행동 유도, 결정할 때 사용합니다.
Buttons
Primary Button은 제출, 확인, 구매, 등록 등 주요 행동 유도, 결정할 때 사용합니다.
Buttons
Primary Button은 제출, 확인, 구매, 등록 등 주요 행동 유도, 결정할 때 사용합니다.
Primary Button
ESSENTIAL
레이블
OPTIONAL
아이콘
Primary 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
Content
Properties
Content
Properties
Content
Spec
Content
Spec
Content
Spec
Position
Toolip은 기준 요소를 중심으로 주변 관계에 따라 적절한 위치를 선택해서 사용합니다.
Spacing
요소와 Tooltip 사이의 간격은 0.4rem로 통일하여 사용합니다.
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
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Properties
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Properties
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Usage
Do
Tooltip 텍스트는 두 줄 이상으로 확장하여 사용할 수 있습니다.
Don't
Tooltip 안에 버튼, 링크와 같은 인터랙션 요소를 포함할 수 없습니다.
Usage
Do
Tooltip 텍스트는 두 줄 이상으로 확장하여 사용할 수 있습니다.
Don't
Tooltip 안에 버튼, 링크와 같은 인터랙션 요소를 포함할 수 없습니다.
Usage
Do
Tooltip 텍스트는 두 줄 이상으로 확장하여 사용할 수 있습니다.
Don't
Tooltip 안에 버튼, 링크와 같은 인터랙션 요소를 포함할 수 없습니다.
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
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Properties
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Properties
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
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
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Properties
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Properties
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
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
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Properties
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
Properties
position | top-start, top , top-end, left,right, bottom-start, bottom, bottom-end |
color | gray, purple |
icon | false, true |
text | string |
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us