The nuiButton directive styles a native <button> or <a>. The element keeps its semantics, keyboard behavior and form participation; the directive only reflects its inputs to the data attributes that the stylesheet targets.
Use a <button> for actions and an <a> for navigation. Both look the same, and both support disabled.
Variants
Four fill styles, from the most prominent to the quietest. Use one solid button per view for the primary action.
Tones
Tones change the palette: accent for the main path, neutral for secondary actions, danger for destructive ones.
Sizes
Three heights: 28, 36 and 44 pixels. Even the smallest clears the WCAG 2.2 minimum target size.
Links and disabled buttons
Anchors can’t be disabled natively, so a disabled link gets aria-disabled="true" and its clicks are blocked, even with routerLink.
Press effects
Press and hold each one. press sets what a button does while held down, and motion the spring it comes back on. data-nui-press on any element sets it for everything inside.
Corners, radius and density
corners changes the shape of the corners, radius their size and density the room a button takes, never below the 24px target size. Browsers without corner-shape draw round corners.