Skip to main content

    ToggleButtonGroup

    ToggleButtonGroup lets users toggle between a set of related options, typically with one preselected. It's best for switching between views or a compact group of options with immediate effect.

    OverviewPropertiesUsage

    When to use​

    • To present related choices in a compact format where users can select one option at a time.
    • To filter or control existing content on a page. For example, filtering table content by categories or use cases.
    • To switch between visual representations. For example, changing from list to grid view or toggling between chart types.
    • For controls that instantly update the interface without requiring additional confirmation.

    Examples of how to use ToggleButtonGroup component for filtering use cases and for toggling between visual representations. Examples of how to use ToggleButtonGroup component for filtering use cases and for toggling between visual representations.

    When not to use​

    • To organize content in sections or pages and navigate between them. Instead, use Tabs.
    • When there are more than five options. Use Select instead.
    • When there isn't enough space to display all options. Use Select instead.
    • For choices in forms that require additional context or a submit action. Use Radio instead.
    • When users need to select multiple options. Use Select or Checkbox instead.
    • For simple binary decisions, such as "yes/no" or "on/off". Use Switch instead.

    Comparison of ToggleButtonGroup and Tabs component use case Comparison of ToggleButtonGroup and Tabs component use case

    Example where ToggleButtonGroup switches to Select or icon-only layout for small viewports. Example where ToggleButtonGroup switches to Select or icon-only layout for small viewports.

    Content guidelines​

    Labels​

    • Keep labels concise and under 20 characters.
    • Use nouns or short phrases (e.g., "Grid view" not "Switch to grid view").
    • No abbreviations.
    • Use sentence case. (Only the first letter and any names are capitalized.)
    • Don't add a period.

    Icons​

    • Don't mix text-only, icon-only, or icon-with-text options within a ToggleButtonGroup. Choose a single style.
    • Only use icons without text labels (icon-only) if the icon's meaning is understood by everyone.
    • Include alt-labels and tooltips to ensure clarity and accessibility for icon-only options.
    • Place icons that clarify the meaning of an option before the label.

    Example of a ToggleButtonGroup where all options are text-only as Do and mixed label-only and icon-with-text options as Don't. Example of a ToggleButtonGroup where all options are text-only as Do and mixed label-only and icon-with-text options as Don't.

    Still have questions?
    Find answers in the Dynatrace Community