Sini-style ng nuiButton directive ang isang native na <button> o <a>. Nananatili sa element ang semantics nito, ang behavior nito sa keyboard at ang paglahok nito sa form; ipinapasa lang ng directive ang mga input nito sa mga data attribute na tina-target ng stylesheet.
Gumamit ng <button> para sa mga aksyon at ng <a> para sa navigation. Magkamukha ang dalawa, at pareho nilang sinusuportahan ang disabled.
Mga variant
Apat na fill style, mula sa pinakakapansin-pansin hanggang sa pinakatahimik. Gumamit ng isang solid button bawat view para sa pangunahing aksyon.
Mga tone
Binabago ng tone ang palette: accent para sa pangunahing daloy, neutral para sa mga pangalawang aksyon, danger para sa mga mapanirang aksyon.
Mga laki
Tatlong taas: 28, 36 at 44 pixel. Kahit ang pinakamaliit ay lampas sa minimum na target size ng WCAG 2.2.
Mga link at naka-disable na button
Hindi puwedeng i-disable nang native ang mga anchor, kaya nilalagyan ng aria-disabled="true" ang naka-disable na link at hinaharangan ang mga click dito, kahit may routerLink.
Mga press effect
Pindutin nang matagal ang bawat isa. Itinatakda ng press ang ginagawa ng button habang nakapindot, at ng motion ang spring na nagbabalik dito. Sa kahit anong element, itinatakda ng data-nui-press ang effect para sa lahat ng nasa loob nito.
Mga sulok, radius at density
Binabago ng corners ang hugis ng mga sulok, ng radius ang laki nila at ng density ang espasyong kinukuha ng button, pero hindi ito lumiliit nang lampas sa 24px na target size. Bilog ang mga sulok na iginuguhit ng mga browser na walang corner-shape.