• Log inStart now

InlineMessage

Usage

import { InlineMessage } from 'nr1'

Examples

Props

actionshape

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

shape

ariaLabelstring
labelrequiredstring
onClickfunction

Callback fired any time the user clicks on the button.

function (
event: React.MouseEvent
)
toshape|string

Location object or url string to link to.

shape

pathnamerequiredstring
searchstring
hashstring
ariaLabelstring

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.

classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

descriptionstring

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.

labelstring

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.

styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

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.

titlestring

Title displayed in the dialog.

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

typeenum
DEFAULT
InlineMessage.TYPE.INFO

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 of
InlineMessage.TYPE.CRITICAL,
InlineMessage.TYPE.INFO,
InlineMessage.TYPE.SUCCESS,
InlineMessage.TYPE.WARNING,
>
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.