Button Toggle
A Toggle button is a collection of buttons that
allow users to trigger a set of options relevant to each other, and applying
to specific contents.
Use Cases
- When there are available actionable buttons that trigger actions over one shared container, component or screen area.
- When a filtering criteria of no more than five options could be applied to the content of a related component (for example: Last month, Last week, Today, Next week, Next month).
- When no more than five format, display or edit options are available to be applied to the content of a single component.
HTML
Do's & Dont's
Name buttons clearly and concisely
Button group labels should be simple and self-explanatory (under the
given context). Use 1-3 short words to name each option, always
preferring the use of any of the labeled versions. Use the icon-only
version only if the items are related to standard options/actions
(such as text formatting) and always validate this decision with the
business stakeholders.
Group options logically, order them
based on user needs
Bundle buttons logically into sets based on what attribute they are
affecting (are they all related to date?, are they all related to
format?). Once this is defined, order them based on usage and
importance, with the most important/most clicked action always on
the left.
Alternative and Related components
