Interactive Demo
This demo allows you to 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
An inline message contains one required element and two optional elements.
| Item | Name | Description | Component | Optional |
|---|
Options
An inline message has the following options to provide an appropriate experience for different scenarios.
Intent
An inline message has two intents: informative and negative. Each intent is used to communicate a specific semantic tone to the user.
Icon
An Icon can be displayed to provide the user with a visual cue and to help those with colour blindness discern the message tone.
Title
A title can be displayed to provide the user with extra context to the message.
Intent
An inline message has two intents: informative and negative. Each intent is used to communicate a specific semantic tone to the user.
Icon
An Icon can be displayed to provide the user with a visual cue and to help those with colour blindness discern the message tone.
Title
A title can be displayed to provide the user with extra context to the message.
Behaviours
The following guidance describes how an 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
The following guidance describes how and when to appropriately use an inline message component.
Do
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 an inline message for critical system-level messages such as errors e.g. loss of functionality. Something that partially or fully interrupts a user experience is more appropriate e.g. a Banner or Modal.
Do
Carefully consider if you need to use more than one inline message per screen, as this could increase a users cognitive load and become less effective in drawing attention to content.
Don’t
Use an inline message to add context to a single input such as a Text input. Assistive text within an input is more appropriate.
Don’t
Use multiple inline messages in close proximately.
Accessibility Considerations
An inline message implements accessibility best practices.
| Element | Attribute | Value | Description | User Supplied |
|---|
API
An Inline Message has a range of props that can be used to define an appropriate experience for different use cases and a range of predefined elements and attributes that can be overridden to define its appearance.
| Name | Type | Default | Description | Required |
|---|
Compliance
All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.
| Feature | Description | Status |
|---|