Newskit Logo
About

Feedback & Status

InlineMessage

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 InlineMessage 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
import React from 'react';
import { InlineMessage } from 'newskit';

export default () => (
  <InlineMessage
    overrides={{ stylePreset: 'inlineMessageInformative' }}
    icon="your icon here"
    title="InlineMessage title"
  >
    InlineMessage's message will display here
  </InlineMessage>
);

API

InlineMessage

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

React.ReactElement<NewsKitIconProps>

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?