NssButtons

A styled button component with colors, sizes, glow effects, and click callbacks. NUI

Getting Started

NssButtons is a factory that creates NssButton instances. Each button supports chained configuration for colors, sizes, glow effects, and click handling.

import {NssUiApi} from "nui://nss_libs/ui/NssUiApi.js";

nss_ui_api.load([NssUiApi.NssButtons]).then((components) => {
    const buttons = new components.NssButtons();
    const btn = buttons.create('Click me');

    btn.setGold().setGlowGold().onClick(() => {
        console.log('Button clicked');
    }).appendTo(document.getElementById('button-container'));
});

Constructor

new NssButtons()

Creates a button factory instance.

const buttons = new NssButtons();

Methods

.create(label)

Creates a new NssButton instance with the given label.

Param	Type	Default	Description
label	string	—	The button text. Supports HTML

Returns NssButton — a new button instance.

const save_btn = buttons.create('Save');
const cancel_btn = buttons.create('Cancel');

NssButton Methods

All NssButton methods return this for chaining unless noted otherwise.

.onClick(callback)

Registers a click handler.

Param	Type	Default	Description
callback	NssPadLock~onClickCallback	—	Called with the NssButton instance when clicked

Returns NssButton — chainable.

btn.onClick((button) => {
    button.setDisabled();
    nss_client.post('submit');
});

---

.appendTo(target_el)

Appends the button wrapper to a DOM element.

Param	Type	Default	Description
target_el	HTMLElement	—	The parent element

Returns NssButton — chainable.

btn.appendTo(document.getElementById('footer'));

---

.setLabel(label)

Changes the button label. Supports HTML.

Param	Type	Default	Description
label	string	—	The new label text

Returns NssButton — chainable.

btn.setLabel('Saving...');

---

.getEl()

Returns the inner <button> element.

Returns HTMLButtonElement — the button element.

btn.getEl().focus();

---

.getWrapperEl()

Returns the outer <div> wrapper element. Use this when adding the button as a child of another element.

Returns HTMLDivElement — the wrapper element.

container_el.appendChild(btn.getWrapperEl());

---

Color Methods

Set the button color. Only one color can be active at a time.

Method	Description
setWhite()	White background
setGrey()	Grey background
setDanger()	Red background
setGold()	Gold background
setSuccess()	Green background

const confirm_btn = buttons.create('Confirm').setSuccess();
const delete_btn = buttons.create('Delete').setDanger();

---

Size Methods

Set the button size.

Method	Font Size
setSizeVerySmall()	0.5rem
setSizeSmall()	0.8rem
setSizeNormal()	1rem (default)
setSizeLarge()	1.25rem

btn.setSizeLarge();

---

Glow Methods

Add animated glow effects to the button.

Method	Description
enableGlowing()	Enables the glow animation
disableGlowing()	Disables the glow animation
setGlowGreen()	Green glow color
setGlowDanger()	Red glow color
setGlowGold()	Gold glow color

btn.setSuccess().setGlowGreen();
btn.setDanger().setGlowDanger();

---

State Methods

Method	Description
setDisabled()	Disables the button (no clicks, dimmed)
setEnabled()	Enables the button
isDisabled()	Returns boolean
setBorderless()	Removes inner padding (icon-only style)
unsetBorderless()	Restores padding
setIcon()	Switches to icon-only mode (reduced padding, no min-width)
unsetIcon()	Switches back to text mode

btn.setDisabled();
// After async operation:
btn.setEnabled();

Events / Callbacks

• Click — registered via onClick(callback). Audio: NssAudio.playSfxNext() on click (suppressed when disabled).
• Hover — plays NssAudio.playSfxUpDown() automatically.

CSS

Classes

Class	Description
.nss-btn	Base button element
.nss-btn__wrapper	Inline-block wrapper
.nss-btn--white / --grey / --danger / --success / --gold	Color variants
.nss-btn--very-small / --small / --large	Size variants
.nss-btn--icon	Icon-only mode
.nss-btn--borderless	No padding
.nss-btn--glow	Glow base class
.nss-btn--glow-green / --glow-danger / --glow-gold	Glow color variants

Custom Properties

Property	Default	Description
--padding-tb	calc(var(--1rpx) * 12)	Vertical padding
--padding-lr	calc(var(--1rpx) * 25)	Horizontal padding
--min-width	var(--100rpx)	Minimum button width
--font-size	1rem	Font size
--color	rgba(255,255,255,0.8)	Text color
--hover-color	rgba(255,255,255,1)	Text color on hover
--img-url	url(./img/btn_bg.png)	Background image

Animations

Keyframe	Description
glowing	Animated gradient glow effect (15s infinite loop)

Dependencies

• NssUiComponent — base class (initializes NssResponsive).
• NssAudio — hover and click sound effects.

Things to Know

WARNING

NssButtons is the factory, NssButton is the individual button instance. You never instantiate NssButton directly.

• Hover audio (playSfxUpDown) plays automatically — no opt-out. Click audio (playSfxNext) is suppressed when the button is disabled.
• Use getWrapperEl() (not getEl()) when appending a button to a container — the wrapper provides correct inline-block layout.