Newskit Logo
View Github

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

v3.3.0

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

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.

WAI-ARIA
ElementAttributeValueDescriptionUser Supplied

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

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

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?