Skip to main content

ToggleButtonGroup

The ToggleButtonGroup is used to group related options. The group consists of at least two ToggleButtonGroupItems. The ToggleButtonGroup supports exclusive selection only. That means that selecting one option deselects any other.

OverviewPropertiesUsage

ToggleButtonGroup vs. Tabs​

An example of a ToggleButtonGroup component next to a Tab component. An example of a ToggleButtonGroup component next to a Tab component.

ToggleButtonGroup​

  • Use ToggleButtonGroups for closely related choices that control certain parts of a view. You can only select one option at a time.
  • Selecting one of the choices usually affects existing content, for example, by filtering it or changing the visual appearance, such as switching from list view to grid view.
  • Use ToggleButtonGroups for a maximum of about five choices. If more are available, consider using a Select.
  • Never use ToggleButtonGroups for navigational purposes. Instead, use Tabs.

Tabs​

  • Use Tabs to organize content and for navigational purposes within a view or context. Only one tab can be active at a time.
  • Selecting one of the tabs always replaces the entire content in the tab's content area.
Still have questions?
Find answers in the Dynatrace Community