Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

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 Button toggle selection mode.

Basic Button Toggle

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

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: