Design principles | Neural Native

Consistency with room for the platform

Neural Native brings the visual language of Neural UI to Angular Native: shared colors, surfaces, action hierarchy and component contracts. Consistency means the same action has the same meaning across screens. It does not require every operating-system control to look identical.

Switch uses the platform switch underneath, so its shape and interaction can differ between Android and iOS. Components such as Button and Card use the library’s shared styling. Test the actual task on both platforms; a web preview helps explore APIs but cannot establish native keyboard, gesture or accessibility behavior.

Make the next action obvious

Give a screen one clear purpose. Use a solid button for its primary action, tonal or outline for secondary actions, and text for low-emphasis actions. Variant expresses visual hierarchy; it does not change the meaning of the pressed event or carry out navigation automatically.

preferences.component.html

<neu-button label="Save preferences" variant="solid" (pressed)="save()" />
<neu-button label="Reset" variant="text" (pressed)="reset()" />

Write action labels as verbs and keep field labels visible. A placeholder is an example of the expected input, not a substitute for a label. Place hints and errors next to the field, and make success visible after an action instead of leaving the user to guess.

Space, typography and touch

Separate unrelated groups with more space than related fields. Start with a simple vertical layout and use a SafeAreaView at the screen boundary so content respects the device insets. On tablets, limit long reading lines and group related controls rather than stretching every field across the screen.

The default Button and IconButton have a minimum touch size of 48 native layout units. Do not shrink their touch targets to match a small icon. Keep room for longer translations and enlarged system text; a fixed-height row that looks good with one short label can clip real content.

Compose a complete task

This preferences screen combines editing, a platform switch, primary and secondary actions, and visible feedback. Its state stays in the application. The save method prepares the data; connect your own service to persist it. The example does not send a network request.

Place the following component inside the root neu-theme of your application.

src/app/preferences.component.ts

import { Component, computed, signal } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuButtonComponent } from '@neural-ui/native/button';

@Component({
  selector: 'app-preferences',
  imports: [Text, View, NeuInputComponent, NeuSwitchComponent, NeuButtonComponent],
  template: `
    <view class="content">
      <neu-input label="Full name" [(value)]="name" hint="Shown to your team" />
      <neu-switch label="Team notifications" [(checked)]="notifications" />
      <neu-button label="Save preferences" [disabled]="!canSave()" (pressed)="save()" />
      <neu-button label="Reset" variant="text" (pressed)="reset()" />
      <text class="feedback">{{ feedback() }}</text>
    </view>
  `,
  styles: `
    .content { padding: 24px; gap: 16px; }
    .feedback { color: var(--neu-text); }
  `,
})
export class PreferencesComponent {
  readonly name = signal('Ada Lovelace');
  readonly notifications = signal(true);
  readonly canSave = computed(() => this.name().trim().length > 0);
  readonly feedback = signal('');

  save(): void {
    if (!this.canSave()) return;
    const preferences = { name: this.name().trim(), notifications: this.notifications() };
    this.feedback.set('Preferences ready for ' + preferences.name);
    // Pass preferences to your application service to persist them.
  }

  reset(): void {
    this.name.set('Ada Lovelace');
    this.notifications.set(true);
    this.feedback.set('');
  }
}

Understand state and events →