Usage
import { InlineMessage } from 'nr1'
Examples
Props
You may specify an action to provide the user with some actionable next steps to avoid leading them to a dead end.
shape
Callback fired any time the user clicks on the button.
function (event: React.MouseEvent )
Location object or url string to link to.
shape
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.
Appends class names to the component.
Should be used only for positioning and spacing purposes.
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.
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.
Inline style for custom styling.
Should be used only for positioning and spacing purposes.
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 displayed in the dialog.
Note: title
, label
, and description
props are optional, but at
least one of them has to be provided.
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 ofInlineMessage.TYPE.CRITICAL,InlineMessage.TYPE.INFO,InlineMessage.TYPE.SUCCESS,InlineMessage.TYPE.WARNING,>