📄️ Actions Bar
The actions bar is a component within a tab which is split into left/right sides and contains important controls for a given user interface.
📄️ Common Form
The common form user interface pattern is the most frequent pattern used to display a form which can be used to create a new Thing or edit an existing Thing.
📄️ Common List
The common list user interface pattern is the most frequent pattern used to display a paginated collection of ‘Things’, with related actions which can manipulate that collection.
📄️ Disabled UI
The Disabled UI pattern allows you to prevent the user from interacting with parts of a UI. This can be useful when an external action needs completing before the UI can be used. A message should be shown advising the user what action needs to be taken.
📄️ Filter Bar
The filter bar pattern allows you to build up a list of filters to be applied to a UI. Commonly used to filter tabular data as an alternative to displaying a potentially large form.
📄️ Integrations
Integrations are a highly technical feature, often linking together separate systems and software using technical terminology like port numbers, timeouts and access tokens. Great care should be taken to design the integration to help the user understand what information they must supply and where they can find it.
📄️ Masterswitch
The masterswitch pattern allows you to enable and disable a larger UI with a single control. Commonly used in ‘settings’ interfaces it provides an easy to understand on/off switch for users.
📄️ No results
When an interface needs to list items you should provide a helpful fallback message for when no results are found. If the user has the relevant permissions to create or add one of these items, you should provide a call to action to help them along their way.
📄️ Piano
The piano pattern allows you to switch between different panels of content within the same UI. Commonly used in integration and messages UIs.
📄️ Rules
The Rules pattern allows users to build up a conditional logic statement in a visual way.
📄️ Table Detail
The table detail pattern allows a user to view additional information relevant to a row whilst staying in context.