Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

Button Toggle

The Button Toggle component lets users choose one or more states from a short set of related options. Use it as a compact selection control for modes, formatting, filters, density, alignment, or other preferences where the selected state should stay visible.

Use it for:
  • Mode switching: Select one view, format, sorting mode, period, or layout density.
  • Multiple compact choices: Let users select several short options in the same group.
  • Persistent state: Show the current value directly on the control.
  • Form values: Bind selected values through Angular forms.

Do not use Button Toggle to run actions, navigate between pages, handle long option lists, or replace radio, checkbox, select, slide toggle, or tabs when those controls better match the task.

The NgStarter Angular Button Toggle component lets you let users choose one or more options from a compact segmented button group. Use for mode switching, view density, filters, or mutually exclusive short choices. It includes examples for Basic Button Toggle, Selection Mode, and Icon Only Button Toggle.

Basic Button Toggle

Use a basic toggle group when users choose one mode or formatting option from a small related set.

Icon Only Button Toggle

Use an icon-only toggle group for compact mode switching when the icons are familiar and each option still has an accessible label.

Selection Mode

Use single selection for mutually exclusive values and multiple selection when several short options can be active at once.

Single selection:

Single selection (hidden indicator):

Multiple selection: