Feedback & Status
Inline message
Inline messages communicate contextual information. They’re positioned inline, close to the element they’re adding context to.
Interactive demo
This demo lets you preview the inline message component, its variations and configuration options.
InlineMessage title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1import React from 'react';
2import { InlineMessage } from 'newskit';
3
4export default () => (
5 <InlineMessage
6 overrides={{ stylePreset: 'inlineMessageInformative' }}
7 icon="your icon here"
8 title="InlineMessage title"
9 >
10 InlineMessage's message will display here
11 </InlineMessage>
12);
13
Anatomy
The inline message component contains one required element and two optional elements.
| Item | Name | Description | Component | Optional |
|---|
Options
The inline message has options for different use cases:
Intent
An inline message has two intents: informative and negative. Each communicates a specific tone to the user.
Icon
Display an icon as a visual cue and help users with colour blindness discern the message tone.
Title
Give the inline message a title to provide more context.
Intent
An inline message has two intents: informative and negative. Each communicates a specific tone to the user.
Icon
Display an icon as a visual cue and help users with colour blindness discern the message tone.
Title
Give the inline message a title to provide more context.
Behaviours
Here’s how the inline message behaves:
Text overflow wrap
When the title and/or message in the inline message is too long for the available horizontal space, it wraps to form another line.
Text overflow wrap
When the title and/or message in the inline message is too long for the available horizontal space, it wraps to form another line.
Usage
Here’s how and when to use the inline message:
Do use inline messages to give context
Use an inline message to provide additional context or supporting information to a particular UI element or function (e.g. delivery terms within a delivery address form).
Don’t use for critical messages
Avoid using inline messages for critical system-level messages such as errors (e.g. loss of functionality). For critical messages, a component that partially or fully interrupts the user experience is more appropriate (e.g. banner or modal).
Don’t use to add context to a single input
Avoid using inline messages to add context to a single input (e.g. text input). Use assistive text instead.
Don't use multiple inline messages on a screen
Think carefully before including more than one inline message per screen, as they can increase a user’s cognitive load and become less effective in drawing attention to content.
Accessibility considerations
The inline message meets accessibility best practices from the W3C guidelines.
| Element | Attribute | Value | Description | User supplied |
|---|
API
The inline message has a range of props and overrides to define the experience in different use cases, and a range of predefined elements and attributes that you can override to define its appearance.
| Name | Type | Default | Description | Required |
|---|