Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

API reference

<tng-button> wraps tngPress with a minimum visual shell and forwards the primitive’s ARIA and disabled semantics to the internal button host.

Wrapper component

The wrapper always renders a native button and applies the base .tng-button shell. Use it when you want the library’s size, tone, and appearance contract rather than styling every button host yourself.

ARIA and state inputs

InputTypeDefaultNotes
appearance'solid' | 'outline' | 'ghost''solid'Visual button treatment.
tone'primary' | 'neutral' | 'success' | 'danger''primary'Semantic color intent.
size'sm' | 'md' | 'lg''md'Control height and horizontal padding.
type'button' | 'submit' | 'reset''button'Forwarded to the native button host.
disabledbooleanfalseDisables interaction and reflects disabled host attrs.
ariaPressedboolean | nullnullPressed-state semantics for toggle-like buttons.
ariaExpandedboolean | nullnullExpanded state for disclosure and popup triggers.
ariaHasPopupTngPressAriaHasPopup | nullnullPopup relationship hint like menu, dialog, or listbox.
ariaControlsstring | nullnullID reference for the controlled content surface.

Primitive foundation

The wrapper is built on tngPress. If you need anchor hosts, button-like link semantics, or completely custom visuals, use the dedicated headless Button page and apply tngPress directly to native button or a hosts.