Skip to main content

    ToggleButtonGroup

    ToggleButtonGroup allows users to trigger actions or events with a single click anywhere within the button container. Users can also trigger a button by pressing Enter or Space while the button has focus.

    OverviewPropertiesUsage

    ToggleButtonGroup lets users choose from related options or views with immediate effect. It presents a compact set of choices where users can select one option at a time.

    When to use​

    • To sort items or filter table content based on categories or use cases.
    • To change the visual appearance or formatting of information. For example, to switch from list to grid view or toggle between chart types.
    • To apply a selection immediately. For example, as an alternative to RadioButton in feedback forms or surveys, as ToggleButtonGroup doesn't require submitting a form.

    When not to use​

    • For navigating between different content sections or pages. Instead, use Tabs.
    • If there are more than five options. Use Select instead.
    • If space is limited, for example on mobile view. Use Select instead.
    • For simple "yes/no" or "on/off" decisions. For these, use Switch instead.

    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.

    Visual style​

    • Don't mix styles within a group. Choose a single style: text-only, icon-only, or icon-with-text.
    • Don't wrap ToggleButton over multiple lines. Use Select for narrow viewports, or use universally-understood icons without text labels.

    Icons​

    • 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.
    • Place icons before the label if they help clarify the meaning.
    • Use the suffix icon slot sparingly — only if it indicates additional functionality or provides a contextual hint. Learn more about Functional icons.
    Still have questions?
    Find answers in the Dynatrace Community