IconButton | Neural Native

Import

component.ts

import { NeuIconButtonComponent } from '@neural-ui/native/icon-button';

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Quick actions

Compact, named icon actions add and remove actual checklist rows. The remove action disables when the list is empty; the following examples compare tones and visual hierarchy.

View and copy the complete example

quick-actions.component.ts

import { Component, signal } from '@angular/core';
import { NeuIconButtonComponent } from '@neural-ui/native/icon-button';
import { NeuCheckboxComponent } from '@neural-ui/native/checkbox';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuIconButtonComponent, NeuCheckboxComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Little actions, real progress</text><text class="product-caption">Build your release checklist</text></view>
    <view class="product-surface"><view class="product-row"><view class="product-copy"><text class="product-heading">Release tasks</text><text class="product-caption">{{ tasks().length }} tasks in your list</text></view>
    <neu-icon-button label="Add task" [svg]="addIcon" size="sm" variant="tonal" (pressed)="addTask()" /><neu-icon-button label="Remove last task" [svg]="removeIcon" size="sm" variant="text" tone="danger" [disabled]="!tasks().length" (pressed)="removeTask()" /></view>
    @for (task of tasks(); track task.id) { <neu-checkbox [label]="task.label" /> }
    @if (!tasks().length) { <text class="product-caption">Add a task to start your checklist.</text> }</view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly addIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" /></svg>';
  readonly removeIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14" /></svg>';
  readonly tasks = signal([{ id: 1, label: 'Review onboarding' }, { id: 2, label: 'Prepare release notes' }]);
  private nextId = 3;
  addTask() { const id = this.nextId++; this.tasks.update(tasks => [...tasks, { id, label: 'New release task' + ' ' + id }]); }
  removeTask() { this.tasks.update(tasks => tasks.slice(0, -1)); }
}

Semantic colors

Compare the six semantic colors supplied by the theme.

View and copy the complete example

semantic-colors.component.ts

import { Component, signal } from '@angular/core';
import { NeuIconButtonComponent } from '@neural-ui/native/icon-button';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuIconButtonComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <view class="usage-row">@for (tone of tones; track tone) {
    <neu-icon-button [label]="'Add task: ' + tone" [svg]="addIcon" [tone]="tone" variant="solid" (pressed)="added.set(added() + 1)" />
    }</view>
    </view>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly addIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" /></svg>';
  readonly added = signal(0);
  readonly tones = ['brand', 'neutral', 'success', 'info', 'warning', 'danger'] as const;
}

Visual hierarchy

Compare solid, tonal, outline and text treatments.

View and copy the complete example

visual-hierarchy.component.ts

import { Component, signal } from '@angular/core';
import { NeuIconButtonComponent } from '@neural-ui/native/icon-button';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuIconButtonComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <view class="usage-row">@for (variant of variants; track variant) {
    <neu-icon-button [label]="'Add task: ' + variant" [svg]="addIcon" [variant]="variant" (pressed)="added.set(added() + 1)" />
    }</view>
    </view>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly addIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" /></svg>';
  readonly added = signal(0);
  readonly variants = ['solid', 'tonal', 'outline', 'text'] as const;
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

AndroidNative screenshot

iOSNative screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	Required	Input	Human-readable name for the control, action or group.
svg	string	Required	Input	SVG source string for the icon. The currentColor value lets the native renderer apply the theme color.
variant	NeuVariant	'tonal'	Input	Visual hierarchy: solid, tonal, outline or text. Colors come from the surrounding theme.
tone	NeuTone	'brand'	Input	Semantic color: neutral, brand, success, info, warning or danger. The accent value remains a compatible alias for brand. Colors use NeuTheme tokens; explain statuses with words as well as color.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.
loading	boolean	false	Input	Shows the native loading indicator and prevents Button or IconButton activation.

Models

This component declares no two-way models.

Outputs

Name	Payload	When it emits
pressed	TouchEvent	Emits the native press event when an enabled action is activated.

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

NeuVariant

NeuVariant.ts

import type { NeuVariant } from '@neural-ui/native/foundation';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuVariant = 'solid' | 'tonal' | 'outline' | 'text';

NeuTone

NeuTone.ts

import type { NeuTone } from '@neural-ui/native/foundation';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuTone = 'neutral' | 'brand' | 'accent' | 'success' | 'info' | 'warning' | 'danger';

TouchEvent

TouchEvent.ts

import type { TouchEvent } from '@ng-native/components';
import type { NativeSyntheticEvent } from '@ng-native/fabric';
import type { TouchEventPayload } from '@ng-native/components';

// Public definition for reference only. Import this type; do not redeclare it.
export type TouchEvent = NativeSyntheticEvent<TouchEventPayload>;

NativeSyntheticEvent

NativeSyntheticEvent.ts

import type { NativeSyntheticEvent } from '@ng-native/fabric';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NativeSyntheticEvent<T = unknown> {
    readonly nativeEvent: T;
    /**
     * The node the event happened on, which a listener further up can compare with its own: RN's
     * `event.target`. Null where a host has no node to name.
     */
    readonly target?: unknown;
    stopPropagation(): void;
    isPropagationStopped(): boolean;
}

TouchEventPayload

TouchEventPayload.ts

import type { TouchEventPayload } from '@ng-native/components';
import type { TouchPayload } from '@ng-native/fabric';

// Public definition for reference only. Import this type; do not redeclare it.
export interface TouchEventPayload extends TouchPayload {
    readonly touches?: readonly TouchPayload[];
    readonly changedTouches?: readonly TouchPayload[];
}

TouchPayload

TouchPayload.ts

import type { TouchPayload } from '@ng-native/fabric';

// Public definition for reference only. Import this type; do not redeclare it.
export interface TouchPayload {
    readonly pageX?: number;
    readonly pageY?: number;
    readonly locationX?: number;
    readonly locationY?: number;
    readonly identifier?: number;
    readonly target?: number;
    readonly timestamp?: number;
}