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 |
|---|---|---|---|---|
1 | Icon | Indicates the status or intent. | Icons | |
2 | Title | Reinforces the message text. | Text Block | |
3 | Message | Communicates 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.
| Element | Attribute | Value | Description | User 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
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 |
|---|---|---|---|---|
| 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.
| Feature | Description | Status |
|---|---|---|
| Variations | Relevant variations (style, size, orientation etc.) | |
| Interactive states | All interactive states that are applicable (hover, active, focus, focus, disabled, error etc). | |
| Defined behaviours | Guidelines for layout, animation, interactions, etc. | |
| Usage guidelines | Includes a list of dos and don’ts that highlight best practices and common mistakes to avoid. | |
| Accessibility guidelines | Follows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA. | |
| SEO guidelines | Conforms to best practice SEO techniques. SEO considerations defined. | |
| Props | Details of component properties - their name, type, options, default, whether it’s required and their description have been defined. | |
| Technical performance considerations | Details on how this component may impact performance. | |
| Available in UI kit | Included within Figma Web Gallery file. | |
| Design specifications | Detailed design specification including sizing, spacing and design tokens defined. | |
| Themes | Displays correctly across light and dark themes. |
Cant find what you are looking for?
Cant find what you are looking for?