nuiButton 指令為原生的 <button> 或 <a> 加上樣式。元素原有的語意、鍵盤行為以及在表單中的作用都不會改變;指令只負責把輸入屬性同步到樣式表所對應的 data 屬性上。
執行操作時用 <button>,頁面導覽時用 <a>。兩者外觀相同,也都支援 disabled。
變體
四種填色樣式,從最醒目到最低調。每個畫面只用一個實心按鈕來承載主要操作。
色調
色調決定配色:accent 用於主要流程,neutral 用於次要操作,danger 用於破壞性操作。
尺寸
三種高度:28、36 和 44 像素。即使是最小的尺寸,也符合 WCAG 2.2 的最小目標尺寸要求。
連結與停用的按鈕
原生連結無法停用,因此停用的連結會加上 aria-disabled="true",點擊也會被攔截,即使使用了 routerLink 也一樣。
按壓效果
依序按住每個按鈕試試看。press 決定按鈕被按住時的效果,motion 決定它回彈時使用的彈簧。在任何元素上設定 data-nui-press,就能套用到其中的所有內容。
邊角、圓角與密度
corners 改變邊角的形狀,radius 改變邊角的大小,density 改變按鈕佔用的空間,但按鈕絕不會小於 24px 的目標尺寸。不支援 corner-shape 的瀏覽器會把邊角繪製成圓角。