버튼

버튼은 사용자의 작업을 나타내는 기본적인 시각적 표시기입니다.

원칙

실행 유도: 버튼은 작업을 트리거한다는 것을 명확하게 전달해야 합니다.

명확한 피드백: 즉각적인 피드백을 제공하기 위해 버튼의 모양이 다양한 상호작용 상태(마우스 오버, 누름, 포커스)에서 뚜렷하게 변경되어야 합니다.

일관성: 모든 버튼은 즉시 인식할 수 있도록 핵심 시각적 언어를 공유해야 합니다.

유연성: 버튼 구성요소는 일관성을 해치지 않으면서 아이콘 삽입이나 크기 변화와 같은 다양한 변형을 충분히 반영할 수 있어야 합니다.

사용 및 배치

버튼은 관련 콘텐츠와 가까운 곳에 배치해야 합니다. 단독으로 배치하거나 카드, 목록과 같은 다른 구성요소와 함께 배치할 수 있습니다.

아이콘 버튼

콘텐츠 밀도를 줄이는 데 사용할 수 있는 아이콘 버튼이 있습니다. 아이콘이 작업을 명확하게 설명하는 경우 아이콘 버튼을 사용하고, 그렇지 않으면 버튼 라벨을 포함합니다.

전환 가능

좋아요와 같이 불리언 상태가 있는 작업의 경우 각 버튼 유형에 전환 변형이 제공됩니다. 전환 상태 간에 아이콘을 바꾸면 상호작용을 한눈에 파악하고 반응성을 높일 수 있습니다.

분석

버튼은 라벨과 선택적 선행 또는 후행 아이콘으로 구성됩니다.

아이콘 버튼은 인식 가능한 아이콘으로만 구성됩니다.

둘 다 전환 가능한 변형이 있습니다.

맞춤설정

버튼에는 기본 스타일과 큰 스타일이 포함됩니다. 큰 크기는 중요성을 강조하는 데 도움이 됩니다.

아이콘을 사용하여 버튼을 더 강조하고, 의미를 명확하게 전달하며, 사용자가 더 쉽게 인지하도록 할 수 있습니다.