nuiButton 디렉티브는 네이티브 <button> 또는 <a>에 스타일을 적용합니다. 요소는 고유의 시맨틱, 키보드 동작, 폼 참여 방식을 그대로 유지하며, 디렉티브는 입력값을 스타일시트가 대상으로 삼는 data 속성에 반영할 뿐입니다.
작업에는 <button>을, 탐색에는 <a>를 사용합니다. 둘 다 모양이 같고, 둘 다 disabled를 지원합니다.
변형
가장 눈에 띄는 것부터 가장 차분한 것까지 네 가지 채우기 스타일이 있습니다. 주요 작업에는 화면당 솔리드 버튼 하나만 사용하는 것이 좋습니다.
톤
톤은 팔레트를 바꿉니다. 주요 흐름에는 accent, 보조 작업에는 neutral, 파괴적인 작업에는 danger를 사용합니다.
크기
높이는 28, 36, 44픽셀의 세 가지입니다. 가장 작은 크기도 WCAG 2.2의 최소 타깃 크기를 충족합니다.
링크와 비활성화된 버튼
a 요소는 네이티브 기능만으로는 비활성화할 수 없으므로, 비활성화된 링크에는 aria-disabled="true"가 지정되고 routerLink를 사용하더라도 클릭이 차단됩니다.
누르기 효과
버튼을 하나씩 길게 눌러 보십시오. press는 버튼을 누르고 있는 동안의 동작을, motion은 버튼이 되돌아올 때의 스프링을 설정합니다. 어떤 요소에든 data-nui-press를 지정하면 그 안의 모든 것에 적용됩니다.
모서리 모양, 반경, 밀도
corners는 모서리의 모양을, radius는 모서리의 크기를, density는 버튼이 차지하는 공간을 바꾸며, 버튼이 24px 타깃 크기보다 작아지는 일은 없습니다. corner-shape를 지원하지 않는 브라우저에서는 모서리가 둥글게 그려집니다.