NSDesign UI Library

NSDesign is a reusable Angular UI component library built using Angular CLI version 20.1.0. It provides simple and responsive components, including an accessible and flexible <ns-button> with built-in loading state animation.

✨ Features

• ⚡ Lightweight and tree-shakable Angular components
• 🎨 Responsive button with small, default, and large sizes
• 🔄 Animated SVG loading spinner (orbit-style)
• 🎛️ Customizable via class, variant, disabled, loading, etc.
• 🌗 Auto theming ready for dark/light UI

📦 Installation

npm install @nsinformatika/nsdesign

🧩 Usage

Import the module in your Angular app:

import { NsButtonModule } from '@nsinformatika/nsdesign';

@NgModule({
  imports: [NsButtonModule],
})
export class AppModule {}

🧪 Basic Example

<ns-button (clicked)="submit()">Submit</ns-button>

🌀 Loading State

<ns-button [loading]="isSubmitting" [disabled]="true">Submit</ns-button>

🔠 Sizes

<ns-button class="ns-button-small">Small</ns-button>
<ns-button>Default</ns-button>
<ns-button class="ns-button-large">Large</ns-button>

📚 Component: <ns-button>

| Input | Type | Description | |------------|-----------|-----------------------------------| | disabled | boolean | Disables the button | | loading | boolean | Shows loading spinner (SVG) | | class | string | Allows styling via global class |

| Output | Type | Description | |----------|----------------------|-------------------------------| | clicked| EventEmitter<boolean> | Emits when button is clicked |

⚠️ If loading or disabled is true, click will be ignored.

🧠 Advanced Notes

• Uses ViewEncapsulation.None so host class styling works globally
• Loading spinner is a lightweight rotating SVG circle (not GIF)
• Button height and padding auto-adjusts across breakpoints

More info: Angular CLI Docs

🧾 License

MIT © 2025 Sandika Gusti Prakasa