Inline Notification

Components > User Interaction > Inline Notification

Use this component to...

Notify the user of an event or occurrence, using an element that displays within your content

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Notifications are used to inform the user of an event occurring or a special status.

Notifications come in four different types:

Success: Indicates a successful or positive action.
Information: Indicates a neutral informative change or action.
Warning: Indicates a warning that might need attention. Warnings typically do not halt forward progress with the current action.
Error: Indicates an error or potentially negative action. Errors often halt forward progress with the current action.

Notifications display in one of 3 formats: inline notifications, popup notifications and banner notifications.

This document describes inline notifications.

Inline notifications are part of the page layout and persist in the page. A notification should be inline if it’s important for the user to see the message.

Inline notifications can optionally display an icon to help underscore the message.

Inline notifications can optionally be closable. Closable inline notifications display an X button at the far right; the notification hides when the user presses this button.

Success inline notification

Information inline notification

Warning inline notification

Error inline notification

Closable success inline notification

Warning inline notification with no icon

Information inline notification with an atypical icon

If you need to communicate a status — Success, Information, Warning, or Error — inline within the view, but don’t have much room in which to display it, consider using a status icon instead.

Development

Web component development

Component reference

rui-inline-notification

Module: rui-notifications - Package: @jkhy/responsive-ui-wc

Notification message that displays inline with the data

Name	Type	Default	Description
type	string	'information'	Specifies the type of inline notification styling to display. One of “information”, “success”, “error”, or “warning”.
iconType	string	''	Optional: The name of the icon to display in the notification. You can find a list of all enterprise icons here. The use of custom icons is also supported. Leave this at its default value of blank to display no icon.
isClosable	boolean	false	Bind this property to true to allow the user to be able to dismiss the notification. Leave this property at its default value of false if the user should not be able to close the notification. Error message notifications are typically not closable.

Name

Type

Default

Description

type

string

'information'

Specifies the type of inline notification styling to display. One of “information”, “success”, “error”, or “warning”.

iconType

string

Optional: The name of the icon to display in the notification. You can find a list of all enterprise icons here. The use of custom icons is also supported. Leave this at its default value of blank to display no icon.

isClosable

boolean

false

Bind this property to true to allow the user to be able to dismiss the notification. Leave this property at its default value of false if the user should not be able to close the notification.

Error message notifications are typically not closable.

Implementation

Begin by importing the rui-notifications module into your application.

Import the module

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-notifications/rui-notifications-imports';

Nest the notification content within a rui-inline-notification component.

Specify the type of notification with the type property.
You can optionally display an icon in the notification with the iconType property.
Bind the isClosable property to a value of true to make the notification closable.

Error message notifications are typically not closable.

Example

<rui-inline-notification type="success" iconType="success">
    Success inline notification
</rui-inline-notification>

<rui-inline-notification type="information" iconType="information">
    Information inline notification
</rui-inline-notification>

<rui-inline-notification type="warning" iconType="warning">
    Warning inline notification
</rui-inline-notification>

<rui-inline-notification type="error" iconType="error">
    Error inline notification
</rui-inline-notification>

<rui-inline-notification type="success" iconType="success" isClosable="true">
    Closable success inline notification
</rui-inline-notification>

<rui-inline-notification type="warning">
    Warning inline notification with no icon
</rui-inline-notification>

<rui-inline-notification type="information" iconType="tip">
    Information inline notification with an atypical icon
</rui-inline-notification>

<rui-inline-notification type="information">
    <svg slot="custom-icon" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 26.016q0 2.496 1.76 4.224t4.256 1.76 4.224-1.76 1.76-4.224v-2.016h8v2.016q0 2.496 1.792 4.256t4.224 1.728q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76h-2.016v-8h2.016q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76-4.256 1.76-1.76 4.256q0 0.992 0.384 1.984h-8.736q0.352-1.024 0.352-1.984 0-2.496-1.76-4.256t-4.224-1.76-4.256 1.76-1.76 4.256 1.76 4.224 4.256 1.76h1.984v8h-1.984q-2.528 0-4.256 1.792t-1.76 4.224zM4 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM4 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM12 20v-8h8v8h-8zM24 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM24 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408z"></path>
    </svg>
    Information inline notification with a custom icon
</rui-inline-notification>

Angular wrapper development

Wrapper reference

jha-inline-notification

Module: JhaNotificationsModule - Package: @jkhy/responsive-ui-angular

Notification message that displays inline with the data

Name	Type	Default	Description
jhaType	string	'Information'	Specifies the type of inline notification styling to display. One of “Information”, “Success”, “Error”, or “Warning”.
jhaIconType	string	''	Optional: The name of the icon to display in the notification. You can find a list of all enterprise icons here. The use of custom icons is also supported. Leave this at its default value of blank to display no icon.
jhaIsClosable	boolean	false	Bind this property to true to allow the user to be able to dismiss the notification. Leave this property at its default value of false if the user should not be able to close the notification. Error message notifications are typically not closable.

Name

Type

Default

Description

jhaType

string

'Information'

Specifies the type of inline notification styling to display. One of “Information”, “Success”, “Error”, or “Warning”.

jhaIconType

string

jhaIsClosable

boolean

false

Bind this property to true to allow the user to be able to dismiss the notification. Leave this property at its default value of false if the user should not be able to close the notification.

Error message notifications are typically not closable.

Implementation

Begin by importing the JhaNotificationsModule module into your application.

Import the module

// import into app.module
import { JhaNotificationsModule } from '@jkhy/responsive-ui-angular/jha-notifications';

@NgModule({
    imports: [
        ...
        JhaNotificationsModule,
        ...
    ]
})

export class AppModule(){}

Nest the notification content within a jha-inline-notification component.

Specify the type of notification with the jhaType property.
You can optionally display an icon in the notification with the jhaIconType property.
Bind the jhaIsClosable property to a value of true to make the notification closable.

Error message notifications are typically not closable.

Example

<jha-inline-notification jhaType="Success" jhaIconType="success">
    Success inline notification
</jha-inline-notification>

<jha-inline-notification jhaType="Information" jhaIconType="Information">
    Information inline notification
</jha-inline-notification>

<jha-inline-notification jhaType="Warning" jhaIconType="Warning">
    Warning inline notification
</jha-inline-notification>

<jha-inline-notification jhaType="Error" jhaIconType="Error">
    Error inline notification
</jha-inline-notification>

<jha-inline-notification jhaType="Success" jhaIconType="Success" [jhaIsClosable]="true">
    Closable success inline notification
</jha-inline-notification>

<jha-inline-notification jhaType="Warning">
    Warning inline notification with no icon
</jha-inline-notification>

<jha-inline-notification jhaType="Information" jhaIconType="Tip">
    Information inline notification with an atypical icon
</jha-inline-notification>

<jha-inline-notification jhaType="information">
    <svg slot="custom-icon" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 26.016q0 2.496 1.76 4.224t4.256 1.76 4.224-1.76 1.76-4.224v-2.016h8v2.016q0 2.496 1.792 4.256t4.224 1.728q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76h-2.016v-8h2.016q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76-4.256 1.76-1.76 4.256q0 0.992 0.384 1.984h-8.736q0.352-1.024 0.352-1.984 0-2.496-1.76-4.256t-4.224-1.76-4.256 1.76-1.76 4.256 1.76 4.224 4.256 1.76h1.984v8h-1.984q-2.528 0-4.256 1.792t-1.76 4.224zM4 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM4 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM12 20v-8h8v8h-8zM24 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM24 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408z"></path>
    </svg>
    Information inline notification with a custom icon
</jha-inline-notification>

Component playground

Design

Figma design

Figma design info

You can find this component in the Components - Notifications page in the Figma UI Kit.

Dev Component	Design Component Name
Inline notification	RUI / Notifications / Inline Available values for the Type property: Information Success Warning Error Switch on the “Has Icon” property if you want the inline notification to display an icon at the far left. Switch on the “Has Close Button” property if you want the inline notification to display a close button.

Dev Component

Design Component Name

Inline notification

RUI / Notifications / Inline

Available values for the Type property:

Information
Success
Warning
Error

Switch on the “Has Icon” property if you want the inline notification to display an icon at the far left.

Switch on the “Has Close Button” property if you want the inline notification to display a close button.

Inline notifications display at the top of a display block. In rare cases they can display between the function title and the display blocks.

Resize the width of each inline notification to fit the width of its container.

You can optionally hide the icon and/or the close button.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Notifications

Dev Component	Design Component Name
Inline notification - Success	JHA / Notifications / Inline / Success Select the “No Icon” state in the component if you want to hide the icon. Select the “No Close Button” state in the component if you want to hide the close button. Select the “No Close Button or Icon” state in the component if you want to hide both the icon and the close button.
Inline notification - Information	JHA / Notifications / Inline / Information Select the “No Icon” state in the component if you want to hide the icon. Select the “No Close Button” state in the component if you want to hide the close button. Select the “No Close Button or Icon” state in the component if you want to hide both the icon and the close button.
Inline notification - Warning	JHA / Notifications / Inline / Warning Select the “No Icon” state in the component if you want to hide the icon. Select the “No Close Button” state in the component if you want to hide the close button. Select the “No Close Button or Icon” state in the component if you want to hide both the icon and the close button.
Inline notification - Error	JHA / Notifications / Inline / Error Select the “No Icon” state in the component if you want to hide the icon. Select the “No Close Button” state in the component if you want to hide the close button. Select the “No Close Button or Icon” state in the component if you want to hide both the icon and the close button.

Inline notifications display at the top of a display block. In rare cases they can display between the function title and the display blocks.

Resize the width of each inline notification to fit the width of its container.

You can optionally hide the icon and/or the close button.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Fri Jul 28 2023