The Segmented Button component provides a visually distinct alternative to radio buttons, displaying options as a connected group of buttons.
Basic usage
<flx-segmented-button [(ngModel)]="selectedView">
<flx-segment value="grid" label="Grid" icon="grid"></flx-segment>
<flx-segment value="list" label="List" icon="list"></flx-segment>
<flx-segment value="table" label="Table" icon="table"></flx-segment>
</flx-segmented-button>
Properties
size
'small' | 'medium' | 'large'
default:"medium"
Size of the segmented button
variant
'fill' | 'outline'
default:"fill"
Visual style of the control
Segment properties
Label text for the segment
Icon to display in the segment
Disables this specific segment
Events
Emitted when the selected value changes
Examples
View toggle
With labels
Icons and labels
Sizes and variants
Reactive forms
<flx-segmented-button [(ngModel)]="viewMode">
<flx-segment value="grid" icon="grid"></flx-segment>
<flx-segment value="list" icon="list"></flx-segment>
<flx-segment value="map" icon="map"></flx-segment>
</flx-segmented-button>
export class ContentView {
viewMode = 'grid';
}
<flx-segmented-button [(ngModel)]="timePeriod">
<flx-segment value="day" label="Day"></flx-segment>
<flx-segment value="week" label="Week"></flx-segment>
<flx-segment value="month" label="Month"></flx-segment>
<flx-segment value="year" label="Year"></flx-segment>
</flx-segmented-button>
<flx-segmented-button [(ngModel)]="editor" size="large">
<flx-segment value="wysiwyg" label="Visual" icon="eye"></flx-segment>
<flx-segment value="markdown" label="Markdown" icon="code"></flx-segment>
<flx-segment value="preview" label="Preview" icon="file-text"></flx-segment>
</flx-segmented-button>
<!-- Small size -->
<flx-segmented-button [(ngModel)]="align" size="small">
<flx-segment value="left" icon="align-left"></flx-segment>
<flx-segment value="center" icon="align-center"></flx-segment>
<flx-segment value="right" icon="align-right"></flx-segment>
</flx-segmented-button>
<!-- Outline variant -->
<flx-segmented-button [(ngModel)]="format" variant="outline">
<flx-segment value="bold" icon="bold"></flx-segment>
<flx-segment value="italic" icon="italic"></flx-segment>
<flx-segment value="underline" icon="underline"></flx-segment>
</flx-segmented-button>
<form [formGroup]="chartForm">
<flx-segmented-button formControlName="chartType">
<flx-segment value="line" label="Line" icon="trending-up"></flx-segment>
<flx-segment value="bar" label="Bar" icon="bar-chart"></flx-segment>
<flx-segment value="pie" label="Pie" icon="pie-chart"></flx-segment>
</flx-segmented-button>
</form>
import { FormBuilder } from '@angular/forms';
export class ChartSettings {
chartForm = this.fb.group({
chartType: ['line']
});
constructor(private fb: FormBuilder) {}
}
Styling
flx-segmented-button {
--flx-segment-height: 36px;
--flx-segment-padding: 0 16px;
--flx-segment-border-radius: 6px;
--flx-segment-border-color: #d1d5db;
--flx-segment-background: #ffffff;
--flx-segment-hover-background: #f3f4f6;
--flx-segment-active-background: #3b82f6;
--flx-segment-active-color: #ffffff;
--flx-segment-text-color: #374151;
}
Accessibility
The Segmented Button implements radio group semantics:
- Arrow keys navigate between segments
- Space/Enter selects the focused segment
role="radiogroup" for the containerrole="radio" for each segmentaria-checked reflects selection state
Best practices
- Use for 2-5 mutually exclusive options
- Prefer icons for space-constrained layouts
- Include labels for clarity when space allows
- Use consistent icon styles across segments
- Consider outline variant for secondary controls
Segmented buttons work best for view modes, filters, and formatting controls where users need quick visual feedback.
- Radio - Alternative for more options
- Switch - For binary on/off choices
- Button - For action triggers