InlineMessage

Use the inline messages when an element requires attention. They alert users that important information is available or action is required and disappear once the user has taken appropriate action.

The inline message uses an icon as the main element to give a visual indicator of the type and urgency of the message. The icon can be combined with an optional label to highlight its message.

The inline message reveals a dialog that provides a summary of the issue and links to information or actions when the user hovers on the icon or the icon and label combination.

Usage

import { InlineMessage } from 'nr1'

Examples

Types

<Stack>
  <StackItem>
    <InlineMessage label="We have updated the data for this chart." />
  </StackItem>
  <StackItem>
    <InlineMessage
      type={InlineMessage.TYPE.SUCCESS}
      label="The entity has been successfully created"
    />
  </StackItem>
  <StackItem>
    <InlineMessage
      type={InlineMessage.TYPE.WARNING}
      label="The edition is restricted for this account."
    />
  </StackItem>
  <StackItem>
    <InlineMessage
      type={InlineMessage.TYPE.CRITICAL}
      label="We couldn't fetch the data."
    />
  </StackItem>
</Stack>

Label and action

<InlineMessage
  type={InlineMessage.TYPE.CRITICAL}
  label="We couldn't transform the query."
  action={{ label: 'See the documentation', onClick: console.log }}
/>

Dialog with details

<InlineMessage
  type={InlineMessage.TYPE.SUCCESS}
  label="The data has been added."
  description="You have successfully added 3 new hosts."
  action={{ label: 'See the hosts', onClick: console.log }}
/>

Icon only

<InlineMessage
  type={InlineMessage.TYPE.CRITICAL}
  title="We can't render this query."
  description="We tried to transform your query into a query that is compatible with both Metric and previous Infrastructure methods, but some expressions weren’t available."
  action={{ label: 'See NRQL documentation', to: '//docs.newrelic.com' }}
/>

Props

action

shape

You may specify an action to provide the user with some actionable next steps to avoid leading them to a dead end.

shape

ariaLabel

string

label

REQUIRED

string

onClick

function

Callback fired any time the user clicks on the button.

function (event: React.MouseEvent 
)

to

shape|string

Location object or url string to link to.

shape

pathname

REQUIRED

string

search

string

hash

string

ariaLabel

string

Provide a label for screen readers to describe the status message. This is only required if the screen reader label should be different to the label prop, or if you are not providing a label prop at all.

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

description

string

Should be used to provide further details in the dialog and complement the title.Note: title, label, and description props are optional, but at least one of them has to be provided.

label

string

Short summary of the status. Use the label when possible to shortly describe the status of the component and when there are no spacing limitations.Note: title, label, and description props are optional, but at least one of them has to be provided.

style

object

Inline style for custom styling.Should be used only for positioning and spacing purposes.

testId

string

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

title

string

Title displayed in the dialog.Note: title, label, and description props are optional, but at least one of them has to be provided.

type

enum

Type can be:

Info (default) — use it to indicate general or in-progress status.
Success — use it to communicate positive changes.
Warning — use it to communicate a possible problem, undesired situation, cautionary advice, or advanced notice of some sort.
Critical — use it to communicate problematic issues.
<One ofInlineMessage.TYPE.CRITICAL, InlineMessage.TYPE.INFO, InlineMessage.TYPE.SUCCESS, InlineMessage.TYPE.WARNING >

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Types

Label and action

Dialog with details

Icon only

Props

shape

shape

string

REQUIRED

string

function

shape|string

shape

REQUIRED

string

string

string

string

string

string

string

object

string

string

enum

Usage