Universal patterns
Patterns differ from components, which are already designed, coded, and ready to be imported into a UI. Instead, patterns have multiple ways of accomplishing a user need and typically use a combination of components with additional design considerations. Because of the many ways patterns can be implemented, it is not possible to provide code for every scenario, however some patterns have example code.
Pattern | Description |
|---|---|
Frequently used actions that appear multiple times across different components and workflows | |
Prompted when the system needs input from the user or to give the user urgent information concerning their current workflow | |
Used to completely remove the interactive function of a component | |
Used to disclose additional content or information about part of a UI. | |
How to address moments in an app where there is no data to display to the user | |
The mechanism by which a user adds or removes data items from a displayed data set | |
A group of related input controls that allows users to provide data or configure options | |
Covers using UI Shell components for within and between product navigation; introduces techniques for achieving consistency in products | |
Used when information takes an extended amount of time to process and appear on screen | |
Allows a user to gain access to an application by entering their user ID and password | |
An important method of communicating with users and providing feedback | |
Inputs for form components that users can review but not modify. | |
An intuitive method of discovery, offering users a way to explore a website or application using keywords | |
A set of buttons and menus that allows users to edit text. |