Specifications
-
Button groups are consistent with the Modus button sizes and support primary and secondary options for both outline and solid states:
- Small (24 px)
- Default (32 px)
- Large (48 px)
-
Always use Buttons with consistent style and avoid combining Text Buttons with Icon Buttons within the same Button Group. There are 4 allowed variations:
- Icon Only
- Label Only
- Icon on Left + Label
- Label + Icon on Right
Colors
The Button Groups utilize the same colors as the Primary and Secondary Buttons, both Outline and Solid.
Behavior
-
Default: The default interaction for the Button Group has no state. If a button is clicked, it emits an event but does not remain active. An example scenario may be an action bar or tool menu where the button press opens a dialog or an action that can be applied multiple times (e.g. clearing formatting or printing). This type allows a button to individually maintain its active state so some buttons stay active after click.
-
Single Select: The Button Group functions as a toggle. It marks a button as active on click clearing the active state of any other buttons. The common example would be text orientation, where you can pick only one option from: left aligned, center aligned, or right aligned.
-
Multiple Select: More than one button within the Button Group can be selected. A button becomes active on click but does not clear the others allowing multiple buttons to be visibly active at the same time. The common example would be text formatting; where you can pick bold, italic, underline, etc. and each can be applied at the same time.
Editorial
- All buttons in the Modus Design System employ sentence case.
- Buttons within the Button Group may use labels that are verbs representing an action (e.g. Copy, Paste, Edit, Print) or nouns representing a state (e.g. Bold, Italic, Underline).
- Strive for short button labels that clearly describe the user’s choice.
- Try to limit button labels to three words or less. Using one or two words, if possible, is ideal.
- When writing button labels, you can remove most prepositions and articles (e.g. a, an, the).
Button toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.