Illustrated Message
An illustrated message displays an illustration along with a message, typically used for empty states or error pages.
Example
from deephaven import ui
my_illustrated_message_basic = ui.illustrated_message(
ui.icon("vsError"),
ui.heading("Access denied"),
ui.content("You do not have permissions to access this page."),
)
UI recommendations
Recommendations for creating an illustrated message:
- The message should be concise and, if applicable, describe the next step a user can take.
- The heading should be no longer than 6 words and should not be a replacement for the message text.
- Use sentence case for the heading and message text.
- Use illustrations that are relevant to the message and help convey the context effectively.
- Reserve illustrated messages for situations where they add value and clarity, rather than using them for minor notifications or messages.
Content
An illustrated message is made up of three parts: an illustration, a heading, and a body.
You can populate these sections by providing the following components as children: an ui.icon
for the illustration, a ui.heading
for the heading, and ui.content
for the body.
from deephaven import ui
my_illustrated_message_content_example = ui.illustrated_message(
ui.icon("vsWarning"),
ui.heading("Invalid input"),
ui.content("No special characters allowed."),
)
Labeling
If the heading of an illustrated message isn’t specified, set the aria-label
prop for accessibility purposes.
from deephaven import ui
my_illustrated_message_labeling_example = ui.illustrated_message(
ui.icon("vsWorkspaceTrusted", aria_label="Trusted Workspace")
)
Placeholder
Using an illustrated message as a placeholder for a table or list can clearly indicate the absence of data and provide context-specific guidance.
from deephaven import ui
import deephaven.plot.express as dx
_stocks = dx.data.stocks()
@ui.component
def illustrated_message_placeholder_example():
filter, set_filter = ui.use_state("")
return [
ui.text_field(
value=filter, label="Sym Filter", is_required=True, on_change=set_filter
),
ui.illustrated_message(
ui.icon("vsFilter"),
ui.heading("Filter required"),
ui.content("Enter a filter to display filtered table"),
width="100%",
)
if filter == ""
else _stocks.where(f"Sym=`{filter.upper()}`"),
]
my_illustrated_message_placeholder_example = illustrated_message_placeholder_example()
API reference
An IllustratedMessage displays an illustration and a message, usually for an empty state or an error page.
Returns: Element
The rendered IllustratedMessage component.
Parameters | Type | Default | Description |
---|---|---|---|
*children | Any | The content of the IllustratedMessage which consist of three areas: an illustration, a title, and a body. | |
key | str | None | None | A unique identifier used by React to render elements in a list. |