An Inline Message delivers a short and subtle actionable message on a specific element without disrupting a user’s workflow. It contains an icon, title, description, and link. It cannot be dismissed.
It is a type of Notification Message, so choosing the right messaging approach is essential. See Usage for more details.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Icon |
Visually describes the nature of this message. |
No |
|
2. Title |
Title of the message, no more than 3 words. |
Yes |
|
3. Description |
The full description of the message, intended to be brief. |
No |
|
4. Link |
A link to more information. Can open a dialog or link to another page. |
Yes |
An icon appears left of the title. Each color variant has a corresponding fixed icon to match its context. The icon cannot be turned off.
A title and description appear in the main content area. Titles are optional and can be turned off. Descriptions must not be turned off at any point.
Inline messages can contain links, which are optional. Links can open a dialog or navigate to another page.
Semantics of the link element
The link will always be styled to visually look like a link, however whether you provide an onClick or href will determine what HTML element is used under the hood. For example, if you provide a href it will render as an anchor element (if you are linking to an internal or external website/page please provide a href), whereas if you provide an onClick event it will render as a button. You should use onClick events for completing actions, e.g. opening a dialog.
See the Code tab for further information.
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| type Variant | info | warning | error | feature | upsell | info |
| ↳ ✏️ title Text | string | Title |
| hasAction Boolean | true | false | true |
| hasTitle Boolean | true | false | true |
| ✏️ description Text | string | Description of the message |
| ↳ ✏️ action Text | string | Call-to-action |
Types
Four types (states) are available based on the contextual requirement or severity of the information:
- Informational: general user relevant information (low importance)
- Warning: users attention is required (medium importance)
- Error: users urgent attention is required (high importance)
- Feature/Promotional: new feature relevant to user (low importance)
- Upsell: Special variant for free trial or upgrade flows for Product Growth only
Behavior
An Inline Message cannot be dismissed by the user, but can appear or disappear as the page's state changes as part of a running action.
It can also be left on screen for an indeterminate amount of time.
Component dependencies
This component is internally dependent on the following components:
Recommended reading
Other documentation that will help guide your thinking when working with this component.
Help and support