nuiButton 디렉티브는 네이티브 <button> 또는 <a>에 스타일을 적용합니다. 요소는 고유의 시맨틱, 키보드 동작, 폼 참여 방식을 그대로 유지하며, 디렉티브는 입력값을 스타일시트가 대상으로 삼는 data 속성에 반영할 뿐입니다.
작업에는 <button>을, 탐색에는 <a>를 사용합니다. 둘 다 모양이 같고, 둘 다 disabled를 지원합니다.
변형
가장 눈에 띄는 것부터 가장 차분한 것까지 네 가지 채우기 스타일이 있습니다. 주요 작업에는 화면당 솔리드 버튼 하나만 사용하는 것이 좋습니다.
톤
톤은 팔레트를 바꿉니다. 주요 흐름에는 accent, 보조 작업에는 neutral, 파괴적인 작업에는 danger를 사용합니다.
크기
높이는 28, 36, 44픽셀의 세 가지입니다. 가장 작은 크기도 WCAG 2.2의 최소 타깃 크기를 충족합니다.
링크와 비활성화된 버튼
a 요소는 네이티브 기능만으로는 비활성화할 수 없으므로, 비활성화된 링크에는 aria-disabled="true"가 지정되고 routerLink를 사용하더라도 클릭이 차단됩니다.