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. Medium is the default, but small is fine if applied uniformly.

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.

Button Sizes

  • Medium (default): Use for most actions across the product.
  • Small: Use in tighter spaces like cards or accordions to maintain balance without overwhelming content.
  • Extra-small: Use for compact contexts where space is limited. For Example, in data grid row or bulk actions and menu/action icon buttons.

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

medium (36px)

small (32px)

eXTRA 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

© 2025 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. Medium is the default, but small is fine if applied uniformly.

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.

Button Sizes

  • Medium (default): Use for most actions across the product.
  • Small: Use in tighter spaces like cards or accordions to maintain balance without overwhelming content.
  • Extra-small: Use for compact contexts where space is limited. For Example, in data grid row or bulk actions and menu/action icon buttons.

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

medium (36px)

small (32px)

eXTRA 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

© 2025 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. Medium is the default, but small is fine if applied uniformly.

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.

Button Sizes

  • Medium (default): Use for most actions across the product.
  • Small: Use in tighter spaces like cards or accordions to maintain balance without overwhelming content.
  • Extra-small: Use for compact contexts where space is limited. For Example, in data grid row or bulk actions and menu/action icon buttons.

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

medium (36px)

small (32px)

eXTRA 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

© 2025 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. Medium is the default, but small is fine if applied uniformly.

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.

Button Sizes

  • Medium (default): Use for most actions across the product.
  • Small: Use in tighter spaces like cards or accordions to maintain balance without overwhelming content.
  • Extra-small: Use for compact contexts where space is limited. For Example, in data grid row or bulk actions and menu/action icon buttons.

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

medium (36px)

small (32px)

eXTRA 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

© 2025 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. Medium is the default, but small is fine if applied uniformly.

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.

Button Sizes

  • Medium (default): Use for most actions across the product.
  • Small: Use in tighter spaces like cards or accordions to maintain balance without overwhelming content.
  • Extra-small: Use for compact contexts where space is limited. For Example, in data grid row or bulk actions and menu/action icon buttons.

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

medium (36px)

small (32px)

eXTRA 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

© 2025 Zuora Inc.