Skip to main content
Neural UIv2.0.0Documentation
View v1 GitHub

ButtonGroup

Layout-only group for projected native Neural buttons, without selection ownership.

Category
Actions
Import
@neural-ui/core/button-group
Selector
neu-button-group
import { NeuButtonGroupComponent } from '@neural-ui/core/button-group';

Overview

Use ButtonGroup to arrange related projected button[neu-button] controls. It is a layout and accessible grouping surface, not a toggle or selection controller; each child retains its own action and state.

Group real buttons

Place Buttons inside the group. Change orientation to arrange them horizontally or vertically; fluid makes the group fill its container. Each Button keeps its own action.

Group real buttons
Last action: —

Configurator

Change orientation, fluid width and the accessible group name. The preview and generated template update together. The last option configures the first projected Button, not the group.

Configurator

Live preview

Last child button action: —

Generated template. The Code tab includes imports and state.

template.html
<neu-button-group
  orientation="horizontal"
  [fluid]="false"
  ariaLabel="Document actions"
>
  <button
    neu-button
    (neuClick)="save()"
  >
    Save
  </button>
  <button
    neu-button
    variant="outline"
    (neuClick)="preview()"
  >
    Preview
  </button>
</neu-button-group>

ButtonGroup controls layout and the accessible group name. Each projected button owns its inputs and neuClick event.

Accessibility and keyboard

Core provides a group and connects ariaLabel or ariaLabelledBy. Each child Button keeps native keyboard behavior; this is not a toolbar or a radio group.

Your application supplies the group name when it adds context, and meaningful labels for every action.

Key
Action
Tab Move through the projected native buttons in document order.
Enter / Space Activate the focused child button; the group adds no arrow-key model.

API

The four inputs configure the group layout and accessible name. ButtonGroup has no value model or outputs: handle actions on the projected Buttons, and use a selection component when the interaction edits a selected value.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name
Type
Default
Template binding
Description
ariaLabelstring''[ariaLabel]Accessible name for the rendered role=group wrapper.
ariaLabelledBystring''[ariaLabelledBy]ID of an external element naming the group.
fluidbooleanfalse[fluid]Makes projected buttons share available inline width.
orientationNeuButtonGroupOrientation'horizontal'[orientation]Lays out children horizontally or vertically.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name
Mechanism
Contract
*

Grouped buttons

 Content projection

Child buttons keep their actions; the group organizes their presentation.

<ng-content />

Context used: —

Usage example

Project buttons into the group. Each button keeps its action and API; ariaLabel names the group. No ng-template is needed for this content.

Customize content
Last action: —

Public Types

Open a type to inspect its definition and interface fields.

Theming

ButtonGroup composes the styles of its projected Buttons and has no dedicated public --neu-button-group-* token. Customize the children with Button tokens and use a global preset for shared colors.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token
Purpose here
Other impact
Default / fallback
--neu-radius Control corner radius Shared by other Core consumers; scope the override. 8px