Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Feedback & Status

Inline message

Inline messages communicate contextual information. They’re positioned inline, close to the element they’re adding context to.

Status

Supported

Introduced

v3.3.0

View codeView StorybookView Design

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.

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

The inline message component contains one required element and two optional elements.

ItemNameDescriptionComponentOptional

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.

WAI-ARIA
ElementAttributeValueDescriptionUser 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.

Inline message
NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?