Patterns for in-product help. Includes features like help text, feature discovery dialogs, and empty state messages.
|Web resource key:||
|AMD Module key:||N/A|
Feature discovery dialog
The feature discovery dialog is primarily used to highlight new or existing features to the user. It should contain a short introduction to the feature and encourage users to make use of it.
Feature discovery dialog relies on inline dialog for its usage. It simply adds an additional class to the dialog.
Note that you will need to also explicitly require the web-resource for inline dialog to be able to create an inline dialog successfully.
The purpose of help text is to provide more insight and understanding on a more complex screen. This text should only be dismissable if there is a way for the user to access it again.
Help text can be used by placing an
aui-help-text class on an
outer element and then nesting an
aui-help-content for the block of help text to be formatted.
Empty state message
Empty state messages are used in areas which usually hold content but are not currently populated. An example would be a new instance where content is yet to be created. When enough content exists, empty state messages should disappear.
Empty state messages can be used by placing the
aui-help class along with the
aui-help-empty-state class on a top level container. Using the
class on a container will style a help image besides a body of help text.
To style help text, simply apply the
aui-help-content class on a container with all the information and
suggestions for actions.