pattern-library 2 linked patterns checked
Material Design Buttons
Documents text, outlined, contained, toggle, and icon button treatments, including icon-and-text combinations and icon-only controls whose icon must clearly signify the action.
Read with a purpose
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Button group | Choose a button group when two to four actions are contextually related and should be considered together at one workflow moment. | Each button performs a command immediately or starts a named flow; buttons in the group do not represent persistent selected values unless the component is intentionally a segmented or toggle group. | Material documents button variants, icon and text combinations, and common button treatments used in grouped action contexts. |
| Icon-only ambiguous action | Flag this anti-pattern when the icon meaning is not clear from the visible label, surrounding row, action group, and product convention. | The visual control, accessible name, and action result use the same verb and object. | Material Design documents button variants, icon-with-text buttons, and icon buttons whose icons must signify the button action. |
Comparisons supported by this source
- Icon-only ambiguous action vs confirmation dialog vs undo
Material Design documents icon and text button treatments and icon-only buttons where the symbol must clearly signify the action.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: Google Material Design. Last checked: .