Button Group | Neural Native

Import

component.ts

import { NeuButtonGroupComponent } from '@neural-ui/native/button-group';

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.

Basic

Respond to an invitation. Its status and confirmation show which action ran; use Change response to try again.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuButtonGroupComponent } from '@neural-ui/native/button-group';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuBadgeComponent, NeuAvatarComponent, NeuButtonGroupComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="invitation-scroll" keyboardShouldPersistTaps="handled">
      <view class="invitation">
        <view class="invitation-card">
          <view class="invitation-person">
            <neu-avatar label="Alex Morgan" size="md" tone="neutral" />
            <view class="invitation-person-copy">
              <text class="invitation-name">Alex Morgan</text>
              <text class="invitation-caption">Product design</text>
            </view>
          </view>
          <text class="invitation-title">Design review</text>
          <text class="invitation-caption">Friday · 10:30</text>
          <neu-badge [label]="response() === 'accept' ? 'Accepted' : response() === 'decline' ? 'Declined' : 'Awaiting response'" [tone]="response() === 'accept' ? 'success' : 'neutral'" />
        </view>
        <neu-button-group label="Invitation response" [items]="actions" [disabled]="response() !== ''" (activated)="answer($event)" />
        <text class="invitation-feedback" accessibilityLiveRegion="polite">{{ response() === 'accept' ? 'You accepted the invitation.' : response() === 'decline' ? 'You declined the invitation.' : 'Choose a response to the invitation.' }}</text>
        @if (response()) {
          <neu-button label="Change response" size="sm" variant="text" (pressed)="response.set('')" />
        }
      </view>
    </scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.invitation-scroll { flex: 1; } .invitation { gap: 16px; padding-bottom: 16px; } .invitation-card { gap: 12px; padding: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); border-radius: 16px; } .invitation-person { flex-direction: row; align-items: center; gap: 12px; } .invitation-person-copy { flex: 1; min-width: 0; gap: 3px; } .invitation-name { color: var(--neu-text, #172033); font-size: 15px; font-weight: 600; } .invitation-title { color: var(--neu-text, #172033); font-size: 20px; font-weight: 600; } .invitation-caption { color: var(--neu-muted, #64748b); font-size: 14px; } .invitation-feedback { color: var(--neu-text, #172033); font-size: 15px; line-height: 22px; }
  `,
})
export class ExampleComponent {
  readonly actions: readonly NeuOption[] = [
    { id: 'accept', label: 'Accept' },
    { id: 'decline', label: 'Decline' },
  ];
  readonly response = signal<'accept' | 'decline' | ''>('');
  answer(id: string): void {
    if (id === 'accept' || id === 'decline') this.response.set(id);
  }
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Button Group · android · native capture — **Android**Native screenshot

Button Group · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	'Actions'	Input	Accessible name of the group; this does not add a visible heading above the buttons.
items	readonly NeuOption[]	[]	Input	Ordered data for the component. Use the data contract below and stable, unique item IDs.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.
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.

Models

This component declares no two-way models.

Outputs

Name	Payload	When it emits
activated	string	Emits the activated item ID. Your application performs the action.

Types and data interfaces

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

NeuOption

NeuOption.ts

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

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Field	Type	Requirement	Meaning
id	string	Required	Stable, unique identifier used for tracking and selection.
label	string	Required	Human-readable item name.
description	string	Optional	Optional supporting text; rendering depends on the control.
disabled	boolean	Optional	Prevents activating or selecting this item.

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';