Patterns
Patterns are reusable combinations of components that solve common user problems. Our best practice solutions help users achieve their goals and ensure consistency across experiences.
Patterns (45)
![](/__images/yvlrib0vb3vb/2roAylyiJTEGpvuUt5aoUJ/cb6bc1d8c4e19cae6807ddc6c74405d1/patterns--patterns-overview--actions--os-light.png)
![](/__images/yvlrib0vb3vb/6dSJLMcASRPbPS0FAbqLA3/3aab6f93b99b8b2f81ba56c89debf3d3/patterns--patterns-overview--actions--os-dark.png)
Actions
Ways to invoke actions in the interface.
![](/__images/yvlrib0vb3vb/2hGNnRHt6sN8MckHicibT3/6ac36fea4be15a75c000f9e011dedbf5/patterns--patterns-overview--announcing-beta-and-preview-features--os-light.png)
![](/__images/yvlrib0vb3vb/2zzDJLxsoulFbpwEDFjgqi/557eafb56a5d45213ef40b3c949dbf93/patterns--patterns-overview--announcing-beta-and-preview-features--os-dark.png)
Announcing beta and preview features
Communicate to users which features are in beta or preview.
![](/__images/yvlrib0vb3vb/2lO7s3jbJZ3hISr1SEIZur/60f796e3f10e1f6c318e8d2ed96868a5/patterns--patterns-overview--announcing-new-features--vr-light.png)
![](/__images/yvlrib0vb3vb/48jaXQ5bZm4TitwV7Mo3vN/e3f55ac7b86e5596bf78cf5a7aad5116/patterns--patterns-overview--announcing-new-features--vr-dark.png)
Announcing new features
Communicate new feature releases to users.
![](/__images/yvlrib0vb3vb/3vQRfitaG1XHqzyg4f9Sed/21f2baf8b9b136b3cfa8716445068a14/automated--example--cards-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/1HDqni8aL598e21gqsO3Se/6d0d18662ee4353e6a9f9bc185837349/automated--example--cards-external-dark-desktop--pattern-splash.png)
Card view
A collection of resources represented as cards. It’s effective for glancing at small sets of similar resources with text, numerical, and imagery data sets.
![](/__images/yvlrib0vb3vb/K1YSVzk606pCNaTdffOCM/56b648b6e5c3c251fc4a5369b428453b/patterns--patterns-overview--communicating-unsaved-changes--os-light.png)
![](/__images/yvlrib0vb3vb/30NHguKUZyQebyFnTb1O9f/e04634960a931895d202bc30129fce0a/patterns--patterns-overview--communicating-unsaved-changes--os-dark.png)
Communicating unsaved changes
Communicate to users that unsaved changes on the page will be discarded when users leave a page.
![](/__images/yvlrib0vb3vb/2tVKXNukhCjxGiTdHRP6F2/5ff730233ea55298b743ee7ee3e80ac2/image.png)
![](/__images/yvlrib0vb3vb/3ZlbEFz4jdg8OQH3eNPKR1/714800311a408ba63f278bb5b5138dfb/image.png)
Configurable dashboard
Gives control to the user to show/hide, delete, move, change the size of, and add items to a dashboard.
![](/__images/yvlrib0vb3vb/7d7Z4b2swZtSCfELPWTYhu/b0bfa0a0786615aae04fbb21976da4fa/automated--example--wizard-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/49SjwwtSSm6YEQtJEFnoMs/2013b61534d569c21b67b2d0118ed4e1/automated--example--wizard-external-dark-desktop--pattern-splash.png)
Create resource
With the create new resource pattern, users can create new resources.
![](/__images/yvlrib0vb3vb/01oohsU7p9qBRw9Rtdf3vV/5109af3caaee3e11c64b55fa45fa7a79/patterns--patterns-overview--dashboard-items--vr-light.png)
![](/__images/yvlrib0vb3vb/5H3UPGjGYA5sRrZcx1Dg9x/1ea2e87cf33988364f4c556c495cab75/patterns--patterns-overview--dashboard-items--os-dark.png)
Dashboard items
Dashboard items are self contained UI elements that address specific customer needs, such as navigating to a resource, monitor resources status, or viewing a costs summary.
![](/__images/yvlrib0vb3vb/6vSD5q4X0DbIE86uZQ4o6t/5abb148dda86fc23616957d30d0d834e/patterns--patterns-overview--data-visualization--os-light.png)
![](/__images/yvlrib0vb3vb/6W3YqyDmRO8smE04BUpAVd/565a5ed906478734944b6fd8597994b8/patterns--patterns-overview--data-visualization--os-dark.png)
Data visualization
Data visualization is a graphic representation of information and quantitative data intended to quickly and clearly convey meaning.
![](/__images/yvlrib0vb3vb/5cCMLhh0IdtIJsTcGMg2Wg/72d882e783d2a37414fcea16f237c39b/patterns--patterns-overview--delete-patterns--os-light.png)
![](/__images/yvlrib0vb3vb/3n3ZVlccyvUvEkHuzeERmB/b7c2fb27deb5f67731c86959b2b407cd/patterns--patterns-overview--delete-patterns--os-dark.png)
Delete patterns
With delete patterns, users can delete existing resources.
![](/__images/yvlrib0vb3vb/1gyAo6yxijOGz3r7USCqRA/cc9a5728a6ecaf882b419e8b14067fff/patterns--patterns-overview--delete-with-additional-confirmation--vr-light.png)
![](/__images/yvlrib0vb3vb/MyFHeiBLs9A9wPbiLIZd4/556775463a4d726473dac93f1813c9d8/patterns--patterns-overview--delete-with-additional-confirmation--vr-dark.png)
Delete with additional confirmation
The delete with additional confirmation pattern helps prevent users from performing accidental, high-severity deletions by adding friction during the deletion process.
![](/__images/yvlrib0vb3vb/75DW3FOBEdrt9A6v10p9YU/b074e67c993588496c0bfd8703643a6e/patterns--patterns-overview--delete-with-simple-confirmation--os-light.png)
![](/__images/yvlrib0vb3vb/3GHaKfTxXdsJyekKml5Uac/2a3c08ecfbe46cfad90af0316a7c254e/patterns--patterns-overview--delete-with-simple-confirmation--os-dark.png)
Delete with simple confirmation
Provide a layer of confirmation before deleting resources that cannot be easily recreated.
![](/__images/yvlrib0vb3vb/6TQQEokSZct7HHDzflCXwm/d48d89514deab6e82372c407376031bd/patterns--patterns-overview--density-settings--os-light.png)
![](/__images/yvlrib0vb3vb/2rwLNiVeiMANPAPhJBErc5/bf7c96163e1a4aa17e9821a569ad66bc/patterns--patterns-overview--density-settings--os-dark.png)
Density settings
With the density settings pattern, users can define the preferred density level of the content visible within the interface.
![](/__images/yvlrib0vb3vb/6ZMBNxS4e880eItJueackk/0cc54667ceb50af2ee2dd4304ffbe781/automated--example--details-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/5Dl6WEduibqcag0xqrXHZq/4da222bd8ff337eef0a18eb29fa2eb04/automated--example--details-external-dark-desktop--pattern-splash.png)
Details page
On a details page, users can view at a glance all the available information about a single resource.
![](/__images/yvlrib0vb3vb/C8mNcPNM0qdKkPkvNi8kC/6d091b5dbad9258a50a1aa3bb85caba4/automated--example--details-hub-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/4MRS18cdy5XDimgq3DFnIn/1689dd7e946973c3e93226d5d3cd3c29/automated--example--details-hub-external-dark-desktop--pattern-splash.png)
Details page as a hub
With the details page as a hub pattern, users can view the details about a resource and a preview of related resources. Use the hub for resources that have large and complex data sets.
![](/__images/yvlrib0vb3vb/ZYk4pyDAgGoB7QJOv1Kzx/965df44cfd86557670613c9e5d3aff09/automated--example--details-tabs-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/2XYWaT2zFShKhnYwWxlYJy/c89c4df98a9f56ffed34a7703675c02b/automated--example--details-tabs-external-dark-desktop--pattern-splash.png)
Details page with tabs
Users can use tabs to view the configuration details of a single resource on a single page. Users can choose each tab on the page to easily switch between different groupings of information in the same view.
![](/__images/yvlrib0vb3vb/2BRKwVl9jr84VdDD2JCiBK/882484f68756dc5526f4d2c3fa063951/automated--example--edit-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/37RhvfYbhnwpldBkKLBh3B/5ff02b84c162f0a79eb7eb0cbb152ed0/automated--example--edit-external-dark-desktop--pattern-splash.png)
Edit resource
With the edit resource pattern, users can edit properties and configurations of resources.
![](/__images/yvlrib0vb3vb/3fRwE8vvqTknrE9wDqBMdm/c0cd8d5bc16b372387ab7f100454952f/patterns--patterns-overview--delete-with-empty-states--vr-light.png)
![](/__images/yvlrib0vb3vb/3fC7hLi2CAVJpjHXJRdK5S/b2dd570d9387c9e86408df9b8e38d195/patterns--patterns-overview--delete-with-empty-states--vr-dark.png)
Empty states
An empty state occurs when users haven’t created a resource or have deleted all existing resources. A zero results state occurs when users have filtered and there are no matches.
![Error messages in an alert or flashbar](/__images/yvlrib0vb3vb/31WmMwIDpBQaS4Bdd7sVDd/407ddb74b4a7654836eaf5ce65fdff05/patterns--patterns-overview--error-messages--vr-light.png)
![Error messages in an alert or flashbar](/__images/yvlrib0vb3vb/7oCnXy7Ex3piNb1E8a2Snh/872221280255c61a97491af4ed4342a0/patterns--patterns-overview--error-messages--vr-dark.png)
Error messages
Error messages give users context about an inaccuracy, malfunction, unsuccessful action, or critical issue.
![](/__images/yvlrib0vb3vb/2diUhMVvePCYpLN4sUcCwv/b9b8536ea99befd8fc0439f2fbefa71f/patterns--patterns-overview--feedback-mechanisms--vr-light.png)
![](/__images/yvlrib0vb3vb/9MEs5LqbKCCUAnPNLeZJV/57a6e9e43789fa4494a0bf9ef68c7b4a/patterns--patterns-overview--feedback-mechanisms--vr-dark.png)
Feedback mechanisms
Ways to communicate specific messages to a user in an interface.
![](/__images/yvlrib0vb3vb/17C4nUxEFlsIvdKVhW9BbN/5f5b064012d5a2c7d679dad295212a4f/patterns--patterns-overview--filtering-patterns--vr-light.png)
![](/__images/yvlrib0vb3vb/17TpZlObugSpv30FNxAVAS/45bb23b368953cb4e95655fa932d510a/patterns--patterns-overview--filtering-patterns--vr-dark.png)
Filtering patterns
Filtering patterns let users find specific items in a collection of resources. Users can filter by exact values or by finite sets of properties.
![](/__images/yvlrib0vb3vb/5fIhMf29IL1bexuIvNuWB9/58ea28d561607c71958bd0cd99c7c21e/patterns--patterns-overview--hands-on-tutorials--os-light.png)
![](/__images/yvlrib0vb3vb/4Zqn1NFGxBLHgUCNf7bSw2/fdb82d35df3085feba7ad3709f34de25/patterns--patterns-overview--hands-on-tutorials--os-dark.png)
Hands-on tutorials
Hands-on tutorials provide contextual suggestions at decision points in workflows, and also clarify all the steps that need to be completed in order to achieve an objective.
![](/__images/yvlrib0vb3vb/6JuTaTyC1qDoORL5Tupmjp/bcfa6f235474859a7ca29edac85cd31e/patterns--patterns-overview--help-system--os-light.png)
![](/__images/yvlrib0vb3vb/3T71ArgQ2kQ2CoZTvkQsG2/c990ef78d04a21df1d3394823122375d/patterns--patterns-overview--help-system--os-dark.png)
Help system
The help system pattern allows users to easily and quickly access help within the interface and current workflow.
![](/__images/yvlrib0vb3vb/Jo3uXp65BRx5GXBEzcJMX/a73cc193ecb0300c088b74546e79f2a1/patterns--patterns-overview--hero-header--os-light.png)
![](/__images/yvlrib0vb3vb/6edqvcoaVdiCeWicRi39Kg/97abd188461b1cab64d5a46185b0765a/patterns--patterns-overview--hero-header--os-dark.png)
Hero header
Showcase key messages and functionality for your service or section of a service in the header of the page.
![](/__images/yvlrib0vb3vb/6IHBfpL6GOWxBz6NptdwqJ/19cf59d3f38c0bdd611fd2b755855705/patterns--patterns-overview--image-magnifier--vr-light.png)
![](/__images/yvlrib0vb3vb/3XqM31hGqcP7E0ObsoUfzQ/ba3eb8a00e3b869769b7e36eaf62f899/patterns--patterns-overview--image-magnifier--vr-dark.png)
Image magnifier
Enable users to enlarge an image to view additional details.
![](/__images/yvlrib0vb3vb/5n28OeRVMOAobXHLWAPua3/6172e15bb0cc14c17062197ff6de5b0d/patterns--patterns-overview--loading-and-refreshing--vr-light.png)
![](/__images/yvlrib0vb3vb/jeea0QBMaCuEyouVFJCOl/27c27ab09d0bcb5ce57b85e210ec4317/patterns--patterns-overview--loading-and-refreshing--vr-dark.png)
Loading and refreshing
Loading and refreshing is used to refresh collections of data in the interface.
![](/__images/yvlrib0vb3vb/4fTZCdqcuyY4OI1heuJmBi/d2330589c1b371b488a891a5e549ebef/automated--example--wizard-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/4i1SrywdGDcr7n4yHbuLgu/f22e9fae601c8b012dfc40ff6ef6ae5c/automated--example--wizard-external-dark-desktop--pattern-splash.png)
Multipage create
Use the multipage create, which employs the wizard component, when you want users to create resources by completing a set of interrelated tasks. We recommend multipage create for long or complex configurations.
![](/__images/yvlrib0vb3vb/62aNCSW1mNCgHnE642uA7D/1c441b6e6841c7103d9836228862c2ce/patterns--patterns-overview--onboarding--os-light.png)
![](/__images/yvlrib0vb3vb/6fSTGgbos94Ck1zpCE5QE8/a860ba85523bca2a8d695ab5bb8f4109/patterns--patterns-overview--onboarding--os-dark.png)
Onboarding
The process of getting started with a product or feature.
![](/__images/yvlrib0vb3vb/2nIwb8gN9OqXrXTIQDqX4F/6fff4e7a328f49860931d55242283d80/patterns--patterns-overview--one-click-delete--vr-light.png)
![](/__images/yvlrib0vb3vb/19bJpE5xgATShC9M2OXJTs/5452936c13356db839b1c9dc83ead144/patterns--patterns-overview--one-click-delete--vr-dark.png)
One-click delete
With the one-click delete pattern, users can quickly delete low-risk, non-critical resources.
![](/__images/yvlrib0vb3vb/2hR3Vk8ng92HdzhT4gJb4m/5ab0a6b86d1147f9d9d3a4fd92398cb8/automated--example--details-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/6J2oFGFZLMal2q3DuEbL9Z/461f22cdbcbe09c53b0adc3fe11ad712/automated--example--details-external-dark-desktop--pattern-splash.png)
Resource details
On a resource details page, users can view the details of a resource and, when relevant, any related resources.
![](/__images/yvlrib0vb3vb/78aAqSdwIzRadtbtp8ABG4/10bb82f35b7bb0330acef9131aba3028/patterns--patterns-overview--saved-filter-sets--os-light.png)
![](/__images/yvlrib0vb3vb/6ajky1CoKMkl5u08xd7yDS/1bfab4db1605fa1978b9a6eb9dccc7d0/patterns--patterns-overview--saved-filter-sets--os-dark.png)
Saved filter sets
Enable users to save filter configurations as filter sets and quickly apply them in a collection of resources.
![](/__images/yvlrib0vb3vb/2TodQaEShVa3q9f1RFHra7/c596509acaa4ce43aec6df3c5f130b6f/patterns--patterns-overview--secondary-panels--vr-light.png)
![](/__images/yvlrib0vb3vb/3uv1EcIHAIusuar1x8HjiV/b755c6ba3f74397e3bd76804e3b6abc2/patterns--patterns-overview--secondary-panels--vr-dark.png)
Secondary panels
Panels that allow users to access features or information that are supportive but not essential to the completion of tasks.
![](/__images/yvlrib0vb3vb/3xsboX2aoZJwHuh3Jo65vq/e54352052e00f280719023874884c110/patterns--patterns-overview--selection--os-light.png)
![](/__images/yvlrib0vb3vb/6rPz6aCMg1cwbxba0AjYOR/e8b254872815a8385ef4670d8a473590/patterns--patterns-overview--selection--os-dark.png)
Selection in forms
Form elements that allow users to select one or more options from a list, or turn on and off an option.
![](/__images/yvlrib0vb3vb/NlgbqCwuWVUHfZYso0n01/8560cd58969d8116b914f1459bfe4e4d/automated--example--configurable-dashboard-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/5qdGeF0qaM6hdkjhbeutkm/61ddcf2a1a5b0fe0388a5ce6cd73c31a/automated--example--configurable-dashboard-external-dark-desktop--pattern-splash.png)
Service dashboards
A dashboard page presents at-a-glance information about service and resource status. Users can monitor this information and act upon it quickly.
![](/__images/yvlrib0vb3vb/4V5Sk6IayaE5MnkPnPqlDN/85b45914c3894a9b66b45fdb6bb9a2ac/patterns--patterns-overview--service-navigation--os-light.png)
![](/__images/yvlrib0vb3vb/1qmcjJd865GNUiqvSjqhtz/c4983b13987a9b7d99230ad07eb63079/patterns--patterns-overview--service-navigation--os-dark.png)
Service navigation
Provides a structural view of the service's navigation, and offers globally accessible functionality.
![](/__images/yvlrib0vb3vb/53uCjJ5CN7A129AUTZV3gN/1d4efb6515338bd849c00e10c16de853/patterns--patterns-overview--side-navigation--vr-light.png)
![](/__images/yvlrib0vb3vb/1DQEOFzWVKzv7GRCIt9t32/7e2d7996349819d8390acf1b49128c0b/patterns--patterns-overview--side-navigation--vr-dark.png)
Side navigation
Provides a structural view of a services's navigation, allowing users to easily navigate sections and pages within the service.
![](/__images/yvlrib0vb3vb/7CJzdqhS2GGq1sqOHGTxbg/f30fec05ef3269998b1e8eb610b35683/automated--example--form-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/2BgG1TyRywDaVa5spITOAJ/c1c00dfea2739b1493422ab0e1032714/automated--example--form-external-dark-desktop--pattern-splash.png)
Single page create
Use single page create if you want your users to create a resource on a single page. This component is optimized for simple to medium-complex forms.
![](/__images/yvlrib0vb3vb/1JNsSB8Q2tb9zZj6tIwcdI/bc0dcd9f10aefa59396f805ff5f70de9/automated--example--split-panel-multiple-external-light-desktop--splash.png)
![](/__images/yvlrib0vb3vb/3IVjinlPO36Rp2ZktU9s2S/1884a87366cca3f67302a8bab77918ac/automated--example--split-panel-multiple-external-dark-desktop--splash.png)
Split view
A collection of resources presented as table or cards and paired with a split panel for contextual resource details. It’s effective for quickly browsing or comparing key resource details.
![](/__images/yvlrib0vb3vb/NlgbqCwuWVUHfZYso0n01/8560cd58969d8116b914f1459bfe4e4d/automated--example--configurable-dashboard-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/5qdGeF0qaM6hdkjhbeutkm/61ddcf2a1a5b0fe0388a5ce6cd73c31a/automated--example--configurable-dashboard-external-dark-desktop--pattern-splash.png)
Static dashboard
Identify and structure a predefined and persistent set off items within a dashboard.
![](/__images/yvlrib0vb3vb/438mtWrwe1CmwWKSTjesVp/5876876f680520bbd484fe706baeaa7e/automated--example--table-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/72ltKDT9VRH8Ntgtafs7sb/ae91b9033fcc8c2947cb1e14878e52aa/automated--example--table-external-dark-desktop--pattern-splash.png)
Table view
The table view pattern is a collection of resources in a tabular format. It's effective for quickly identifying categories or comparing values in a large text and numerical data set.
![](/__images/yvlrib0vb3vb/2Yt5GXtD18IscB9YFO8gSw/23a11cb55a2cfd3df0fa79070a272af0/patterns--patterns-overview--timestamps--os-light.png)
![](/__images/yvlrib0vb3vb/2n04LEszsy12ZC1M73oujM/9f2352865c73b04163257a9c88212827/Timestamps.png)
Timestamps
Timestamps display the relative or absolute datetime at which an event has occurred or will occur.
![](/__images/yvlrib0vb3vb/4AyMKeIYMkMhbYBC6imuQT/9dacc6fa8d9d9023786b9e0ef3364d15/patterns--patterns-overview--top-navigation--os-light.png)
![](/__images/yvlrib0vb3vb/5KcwKHIbGvJlZEt914KAob/741c9c8b3441f56bd3fe5f718d7702bd/patterns--patterns-overview--top-navigation--os-dark.png)
Top navigation
Top navigation provides global controls that help users use the product or service. It’s comprised of a collection of global functionalities that are separate from the product's structural navigation.
![](/__images/yvlrib0vb3vb/2NqsivZzGdfW9JU5JYw8hs/46434c35fe8f1b8469bfdf11240b8218/patterns--patterns-overview--user-feedback--os-light.png)
![](/__images/yvlrib0vb3vb/Y3i7BOHT9oWo5r3OpVXSE/8af2facd93de255b4278a35608a00929/patterns--patterns-overview--user-feedback--os-dark.png)
User feedback
User feedback enables users to directly and quickly express their thoughts, concerns, and suggestions about the page they are viewing.
![](/__images/yvlrib0vb3vb/24GASlenmXLbaZM9zgRZxM/72f11eff476445c60ae8cdc8515d22a3/patterns--patterns-overview--validation--os-light.png)
![](/__images/yvlrib0vb3vb/3ydGlVqtLHsPKDGNf24h0z/c9f14a29f37f12def2d33d0faaa9d2a3/patterns--patterns-overview--validation--os-dark.png)
Validation
Help users with error recovery by accurately identifying issues and providing easy identification of incorrect fields for correction.
![](/__images/yvlrib0vb3vb/49b5nv1yrLlsIBN8EIPvT3/c6217f626a2b19d508ec4556137eeadb/automated--example--table-external-light-desktop--pattern-splash.png)
![](/__images/yvlrib0vb3vb/1p34UT7kdzuSfYzyUzQwel/600e4f56df9654ee237701292a049c69/automated--example--table-external-dark-desktop--pattern-splash.png)
View resources
With the view resources patterns, users can find and take action on a collection of resources in the most efficient way possible.