Components
Button
Guides the next action briefly and clearly. Use Primary for the single most important action in an area.다음 행동을 짧고 명확하게 안내합니다. 한 영역에서 가장 중요한 행동 하나에 Primary를 사용합니다.
Playground
<button class="dy-button">Get started together</button><button class="dy-button">함께 시작하기</button>Anatomy구조
- 1Container컨테이너
8px radius by default; pill for brand moments. At least 44px tall.기본 8px 모서리, 브랜드 순간에는 pill. 높이는 44px 이상입니다.
- 2Icon (optional)아이콘 (선택)
Placed before the label with an 8px gap. Never the only content without an aria-label.레이블 앞에 8px 간격으로 둡니다. aria-label 없이 아이콘만 쓰지 않습니다.
- 3Label레이블
A verb that describes the result: 'Save', 'Connect'.결과를 설명하는 동사: '저장하기', '연결하기'.
Variants
| Variant종류 | When to use사용 시점 |
|---|---|
| Primary | The single most important action in an area한 영역에서 가장 중요한 행동 하나 |
| Secondary | Alternatives next to a primary action, like Cancel취소처럼 주요 행동 옆의 대안 |
| Ghost | Low-emphasis actions in toolbars and dense lists툴바, 밀도 높은 목록의 약한 행동 |
| Brand | Marketing moments only, one per screen마케팅 순간에만, 화면당 하나 |
| Critical | Deleting or other actions that can't be undone삭제처럼 되돌릴 수 없는 행동 |
Usage사용 가이드
One primary per area영역당 하나의 주요 행동
Pair one Primary with a Secondary so the recommended path is obvious.Primary 하나와 Secondary를 짝지어 권장 경로를 분명히 합니다.
Don't line up several Primary buttons; nothing stands out when everything is emphasized.Primary를 여러 개 나열하지 않습니다. 모두 강조하면 아무것도 눈에 띄지 않습니다.
Labels describe the result결과를 말하는 레이블
Use a verb that says what happens: 'Delete connection'. On touch screens, keep targets 44px or larger.무엇이 일어나는지 동사로 씁니다: '연결 삭제하기'. 터치 환경은 44px 이상을 권장합니다.
Don't leave the outcome vague with 'OK' or 'Yes', especially for destructive actions.특히 되돌릴 수 없는 행동을 '확인', '예'처럼 모호하게 표현하지 않습니다.
Brand lime, sparingly라임 버튼은 아껴서
Reserve the lime Brand button for one marketing moment, like a campaign hero.라임 Brand 버튼은 캠페인 히어로처럼 하나의 마케팅 순간에만 씁니다.
Don't use lime for routine product actions. Lime is the point of connection, not the default.일상적인 제품 행동에 라임을 쓰지 않습니다. 라임은 기본이 아니라 연결의 지점입니다.
States
| State상태 | Treatment처리 |
|---|---|
| Hover | Background changes to --dy-color-action-hover / 160ms--dy-color-action-hover로 배경 변경 / 160ms |
| Pressed | Press feedback with scale(0.97) / 100msscale(0.97) / 100ms로 눌림 피드백 |
| Focus | 3px focus ring with a 3px offset3px 포커스 링과 3px 간격 |
| Disabled | Disabled with the disabled attributedisabled 속성으로 비활성화 |
| Loading | aria-busy="true" / hides the label, shows a spinner, and blocks repeat clicksaria-busy="true" / 레이블을 숨기고 스피너 표시, 중복 실행 차단 |
Required styles필수 스타일
Load tokens.css first. It includes both the tokens and the dy-button class definitions. For details, see Develop.tokens.css를 먼저 불러오세요. 토큰과 dy-button 클래스 정의가 함께 포함되어 있습니다. 자세한 방법은 Develop을 참고하세요.