Button group

Group related actions into toggleable buttons with support for icons, shapes, and multi-select workflows.

Import

import {FktButtonGroupComponent} from "frakton-ng/button-group";

Basic usage

Single-select group with labeled icons and a predefined selection.

Multiple

Multi-select mode allowing several options to be active simultaneously; value is an array of selected ids.

Shapes

Compare rounded, rectangular, and flat shapes while keeping the same options.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Sizes

Demonstrates how the control scales across the available size tokens.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Orientations

Compares horizontal and vertical layouts. Arrow key navigation adapts automatically: left/right for horizontal, up/down for vertical.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Only labels

Text-only buttons without icons for compact layouts.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Only icons

Icon-only presentation with labels hidden for minimal UI.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Reactive forms

Integration with Angular Reactive Forms via formControl. Demonstrates Validators.required, error display tied to control status, and toggling the disabled state programmatically.

Signal forms

Integration with the signal-based @angular/forms/signals API via the [field] binding. Shows required validation, signal-driven disabled state, and reactive error messages.

Input driven

Manual signal-driven binding using [(value)] and [(touched)] two-way models without a form abstraction. Validation and error display are handled directly in the template.