GET STARTED

Import

Import from the granular entry point so unused components stay out of the application bundle.

import { NeuralButton, NeuralButtonGroup } from '@neural-ng/core/button';

@Component({
  imports: [NeuralButton, NeuralButtonGroup],
  // ...
})

FOUNDATION

Basic action

Use a literal or bound label for everyday actions; projected content remains available for rich composition. The modern clicked output emits the native MouseEvent.

Semantic severities

Intent is explicit and shared with the rest of NeuralNg's semantic palette.

Visual variants

Outlined and text change the treatment, raised composes with either treatment, and rounded switches to the shared pill radius. If both text and outlined are present, text takes precedence deterministically.

Icons and sizing

The icon input removes repetitive inner markup. Logical start/end placement follows RTL, and icon-only actions still need an accessible name. With no label or projected content, the styled control automatically keeps equal width and height at every size.

Button group

NeuralButtonGroup provides native group semantics, merges adjacent borders and radii, follows RTL through logical CSS, and supports horizontal or vertical composition.

Disabled and loading

Loading replaces the visible label, exposes aria-busy and prevents duplicate activation.

Badge composition

Use logical inline positions for counts or corner positions for notification-style indicators.

Native form semantics

The default type is safely button. Opt into native submit or reset behavior explicitly.

<form (ngSubmit)="createProject()">
  <neural-button type="reset" severity="secondary">Reset</neural-button>
  <neural-button type="submit" severity="primary">Create project</neural-button>
</form>

Unstyled + Tailwind

Remove NeuralNg's visual layer while keeping the real button, disabled/loading behavior and structural hook. buttonClass targets the native element.

Accessibility

API

Inputs

Output

Composite components can also consume keyDown, pointerDown, pointerMove, pointerUp and pointerCancel without falling back to a raw button.

Design tokens

Override component tokens locally, at a product boundary or through your global design system.