Toggle Button

A toggle button allows users to select one or more options from a group by toggling individual buttons on or off.

Overview

Code

Anatomy

  1. Container
  2. Label (Text Button)
  3. Icon button

Usage Guidelines

Use a consistent size for input and selection components within the same form or layout to ensure alignment.

Use When

  • Allowing users to activate multiple related options (e.g., text formatting like Bold, Italic, Underline).
  • Offering segmented controls for filtering or sorting items.
  • Displaying icon- or text-based options compactly and clearly.
  • Saving space while grouping related toggle actions in toolbars or controls.

Best Practices

  • Use toggle buttons to present clearly related choices — either for selecting one option (exclusive) or multiple (multi-select).
  • Keep the group small so it remains easy to scan and doesn’t overwhelm the layout.
  • Use text or familiar icons.
  • Use exclusive mode when users should only pick one option at a time (like "List" vs. "Grid" view).
  • Keep button sizes consistent within the same form or layout, especially when paired with input and selection components.

Sizes

Large (36px)

Medium (32px)

small (28px)

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/button/

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2026 Zuora Inc.

Toggle Button

A toggle button allows users to select one or more options from a group by toggling individual buttons on or off.

Overview

Code

Anatomy

  1. Container
  2. Label (Text Button)
  3. Icon button

Usage Guidelines

Use a consistent size for input and selection components within the same form or layout to ensure alignment.

Use When

  • Allowing users to activate multiple related options (e.g., text formatting like Bold, Italic, Underline).
  • Offering segmented controls for filtering or sorting items.
  • Displaying icon- or text-based options compactly and clearly.
  • Saving space while grouping related toggle actions in toolbars or controls.

Best Practices

  • Use toggle buttons to present clearly related choices — either for selecting one option (exclusive) or multiple (multi-select).
  • Keep the group small so it remains easy to scan and doesn’t overwhelm the layout.
  • Use text or familiar icons.
  • Use exclusive mode when users should only pick one option at a time (like "List" vs. "Grid" view).
  • Keep button sizes consistent within the same form or layout, especially when paired with input and selection components.

Sizes

Large (36px)

Medium (32px)

small (28px)

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/button/

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2026 Zuora Inc.

Toggle Button

A toggle button allows users to select one or more options from a group by toggling individual buttons on or off.

Overview

Code

Anatomy

  1. Container
  2. Label (Text Button)
  3. Icon button

Usage Guidelines

Use a consistent size for input and selection components within the same form or layout to ensure alignment.

Use When

  • Allowing users to activate multiple related options (e.g., text formatting like Bold, Italic, Underline).
  • Offering segmented controls for filtering or sorting items.
  • Displaying icon- or text-based options compactly and clearly.
  • Saving space while grouping related toggle actions in toolbars or controls.

Best Practices

  • Use toggle buttons to present clearly related choices — either for selecting one option (exclusive) or multiple (multi-select).
  • Keep the group small so it remains easy to scan and doesn’t overwhelm the layout.
  • Use text or familiar icons.
  • Use exclusive mode when users should only pick one option at a time (like "List" vs. "Grid" view).
  • Keep button sizes consistent within the same form or layout, especially when paired with input and selection components.

Sizes

Large (36px)

Medium (32px)

small (28px)

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/button/

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2026 Zuora Inc.

On This Page

Toggle Button

A toggle button allows users to select one or more options from a group by toggling individual buttons on or off.

Overview

Code

Anatomy

  1. Container
  2. Label (Text Button)
  3. Icon button

Usage Guidelines

Use a consistent size for input and selection components within the same form or layout to ensure alignment.

Use When

  • Allowing users to activate multiple related options (e.g., text formatting like Bold, Italic, Underline).
  • Offering segmented controls for filtering or sorting items.
  • Displaying icon- or text-based options compactly and clearly.
  • Saving space while grouping related toggle actions in toolbars or controls.

Best Practices

  • Use toggle buttons to present clearly related choices — either for selecting one option (exclusive) or multiple (multi-select).
  • Keep the group small so it remains easy to scan and doesn’t overwhelm the layout.
  • Use text or familiar icons.
  • Use exclusive mode when users should only pick one option at a time (like "List" vs. "Grid" view).
  • Keep button sizes consistent within the same form or layout, especially when paired with input and selection components.

Sizes

Large (36px)

Medium (32px)

small (28px)

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/button/

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2026 Zuora Inc.

On This Page

Toggle Button

A toggle button allows users to select one or more options from a group by toggling individual buttons on or off.

Overview

Code

Anatomy

  1. Container
  2. Label (Text Button)
  3. Icon button

Usage Guidelines

Use a consistent size for input and selection components within the same form or layout to ensure alignment.

Use When

  • Allowing users to activate multiple related options (e.g., text formatting like Bold, Italic, Underline).
  • Offering segmented controls for filtering or sorting items.
  • Displaying icon- or text-based options compactly and clearly.
  • Saving space while grouping related toggle actions in toolbars or controls.

Best Practices

  • Use toggle buttons to present clearly related choices — either for selecting one option (exclusive) or multiple (multi-select).
  • Keep the group small so it remains easy to scan and doesn’t overwhelm the layout.
  • Use text or familiar icons.
  • Use exclusive mode when users should only pick one option at a time (like "List" vs. "Grid" view).
  • Keep button sizes consistent within the same form or layout, especially when paired with input and selection components.

Sizes

Large (36px)

Medium (32px)

small (28px)

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/button/

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2026 Zuora Inc.