Newskit Logo

Feedback & Status

Inline Message

An Inline message communicates contextual information. They are positioned inline, in close proximity to the element they are adding context to.

Status

Beta

Introduced

v3.3.0
View code

Status

Beta

Introduced

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.

Intent
Icon
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.

ItemNameDescriptionComponentOptional
1
IconIndicates the status or intent.Icons
2
TitleReinforces the message text.Text Block
3
MessageCommunicates what is about to happen or has happened.

Options

An inline message has the following options to provide an appropriate experience for different scenarios.

Intent

An Inline message has three 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 three 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.

Do not

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.

Do not

Use an Inline message to add context to a single input such as a Text input. Assistive text within an input is more appropriate.

Do not

Use multiple Inline messages in close proximately.

Accessibility Considerations

An Inline Message implements accessibility best practices.

WAI-ARIA
ElementAttributeValueDescriptionUser Supplied
InlineMessage
aria-role
region
InlineMessage
aria-label
region
Defines the Aria-label of the Banner.
InlineMessage
aria-label
"polite", "assertive" or "off" (default)
This prop needs to be set when the Banner appears on the screen at runtime. For more information checn the description for aria live at Mozilla docs.

API

Inline Message

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.

NameTypeDefaultDescriptionRequired
children
Exclude<React.ReactNode, 'undefined'>
Sets the message of the Inline Message.
icon
ReactElement<NewsKitIcon>
If provided, defines the icon that is displayed in the Inline Message.
title
string
If provided, defines the content of the title in the Inline Message.
ariaLabel
React.ComponentType
If provided, defines the Aria-label of the Inline Message.

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.

FeatureDescriptionStatus
VariationsRelevant variations (style, size, orientation etc.)
Interactive statesAll interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behavioursGuidelines for layout, animation, interactions, etc.
Usage guidelinesIncludes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelinesFollows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelinesConforms to best practice SEO techniques. SEO considerations defined.
PropsDetails of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerationsDetails on how this component may impact performance.
Available in UI kitIncluded within Figma Web Gallery file.
Design specificationsDetailed design specification including sizing, spacing and design tokens defined.
ThemesDisplays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Cant find what you are looking for?