Inline notification

Examples​

Check out the Usage section for details about how to design an inline notification properly, and the different configuration options we provide.

Basic Example​

This is a simple example showing an inline notification message that runs a function when you dismiss the notification.

<InlineNotification
  message="Message"
  messageProps={{
    success: 'Hello',
  }}
  onClosed={function () {
    console.log('Closed');
  }}
  isDismissable={false}
  type="success"
/>

Include a link​

By using the linkProp property, it is possible to add a specific link at the end of the notification text.

<InlineNotification
  message="Message"
  messageProps={{
    warning: 'Hello',
  }}
  linkProps={{
    children: 'More Details',
    to: '/inline-notification',
  }}
  isDismissable={false}
  type="warning"
/>

Bundle Notification​

InlineNotification component provides a mechanism to display a bundle with multiple messages. The type of object received by the message prop is used to decide the display option: single message or bundle.

In bundle module, the notification style will be decided by message with the type with the highest severity: error, warning, success and info. The bundle displays all the messages received by the component, grouping them by type.

<InlineNotification
  message={{
    error: {
      MyField: [
        {
          fieldId: 'MyField1',
          message: 'This is a required field',
          type: 'error',
        },
      ],
      AnotherField: [
        {
          fieldId: 'MyField2',
          message: 'Value is below minimum allowed',
          type: 'error',
        },
      ],
    },
    info: {
      'Process due date': [
        { message: 'The process due date is on 7 days', type: 'info' },
      ],
    },
    success: {
      'Claim data loaded': [
        {
          message: 'Claim information successfully retrieved',
          type: 'success',
        },
      ],
      'Personal details are correct': [
        {
          message: 'Personal information successfully validated',
          type: 'success',
        },
      ],
    },
    warning: {
      'Address not found': [
        {
          message:
            'Please review the address details and confim it is correct.',
          type: 'warning',
        },
      ],
      'Validate starting date': [
        {
          message: 'Please confirm that the starting date is correct',
          type: 'warning',
        },
      ],
      'Unable to validate financial details': [
        { message: 'No financial record found', type: 'warning' },
      ],
    },
  }}
  isBundleOpenByDefault={true}
  isDismissable={false}
/>

Usage​

Overview​

An inline notification gives feedback that is specific to a form, process or a section level action performed by the user. It appears only one at a time, placed near the relevant area of the UI and has the same width as the container. The height of inline messages can grow with content.

These notifications exist until dismissed by the user, until issue(s) resolution, or when the user navigates away from the current page.

Anatomy​

Inline notifications are based on the severity of the message.

1. Success messages: indicate a successful operation.

2. Warning messages: indicate potential issues with a task.

3. Error messages: indicate that an operation has encountered errors that prevent the user from progressing to the next stage of a task.

4. General/Neutral Messages: provide helpful information that may aid in task completion or note next steps.

   

Inline notifications consist of the following elements:

1. Icon: provides a visual indication of the message severity.

2. Title: a short text definition of the notification.

3. Description (optional): an optional description of the message. It can contain up to 2 lines of wrapped text.

4. Close button: dismisses the message.

5. Link (optional): enables users to view further details. Can be part of the title text, description text or can be a distinct entity.

Best practices​

• Use inline notifications when the feedback is from the current page in view.

• Use inline notifications for instant feedback on a process confirmation (Submit, etc.)

• Never use inline notifications for system level notifications. Use Toasts instead.

• Never stack inline notifications in a way that causes content to be pushed down from view. Use the bundled messages pattern instead, as defined further below in the doc.

Interactions​

The inline notifications component has the following accommodations for various usage patterns

1. Bundling alerts of the same severity: when multiple messages of the same severity arise in the app, the messages may be bundled together so that it is easier to scan and act on the messages.

   • Title: gives the number of the alerts and an optional title message.

   • Hide/show control: expands to view messages or collapses from view.

   • Alert position navigation link: indicates where the alert has occurred and gives users the ability to navigate to the trigger.

   • Description: provides contextual information about the message.

2. Bundling alerts of different severities: when multiple messages of different severities arise in the app, the messages may be bundled together so that it is easier to scan and act on the messages.

   • Title: Gives the number of alerts in order of highest priority. For example, if there are 5 errors and 5 warnings, the title should communicate the number of errors found and may include an optional title message.

   • Message toggle: Enables the user to toggle between alert groups. Each toggle contains an icon, which indicates the category of the alert, and the number of messages.

   • Navigation link: indicates where the alert has occurred and gives users the ability to navigate to the trigger.

   • Description: provides contextual information about the message.

Navigation​

There are two ways to navigate via inline notifications:

1. Inline links: enable users to navigate to a help document or view further details.

2. Navigation links on messages: give users the ability to navigate to the part of the UI that triggered the message.

UX writing considerations​

Inline notification title​

• Titles should be short, descriptive, and communicate essential information.

Inline notification description​

• In one or two short sentences, explain what actions the user can take to address the issue and provide a path forward.

• The description can include a link that directs users to next steps or enables them to view further details.

Code​

<InlineNotification
  message="Message"
  messageProps={{
    success: 'Hello',
  }}
  onClosed={function () {
    console.log('Closed');
  }}
  type="success"
/>

Import statement​

import { InlineNotification } from '@jutro/components';

Component contract​

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties​

className​

Type

string

Description

CSS class passed to root element of the component

isBundleOpenByDefault​

Type

bool

Default value

false

Description

If true, the bundled messages card will be open

isDismissable​

Type

bool

Default value

true

Description

If true, the dismiss button appears with this component

isEmbeddedNotification​

Type

bool

Description

If true, attributes 'aria-hidden' and 'role' will be added

isTooltipEnabled​

Type

bool

Description

Enables the tooltip to show a full message

linkProps​

Type

Link

Description

Link prop used to navigate the user to an internal or external link. See Link component props for reference.

message​

Type

intlMessageShape, bundledMessagesShape

Description

Message or set of messages to be displayed in the case of bundled notifiations.

messageProps​

Type

{success: intlMessageShape, warning: intlMessageShape, info: intlMessageShape, error: intlMessageShape, dismiss: intlMessageShape}

Description

Message props (error message/aria-label)

onClosed​

Type

func

Description

Function called when the notification disappears

type​

Type

'success', 'warning', 'error', 'info'

Description

Defines the severity of the notification. It is used to set the color and appearance of the notification.

iddeprecated​

Type

string

Description

Component unique identifier.

Hooks​

No hooks are available for InlineNotification.

Translation keys​

There are no translations for InlineNotification.

For information on how to manage translations, see our section about Internationalization.

Escape Hatches​

For more information, see our documentation about escape hatches.

Changelog​

10.1.0​

• id prop was deprecated