Inline Alert

Alert messages for important information.

Syntax

<InlineAlert slots="text" variant="info" />

Your alert message here.

Parameters

slots:
- heading (optional) - Only one title per alert block.
- text (required)
- text1, text2, text[n] (optional) - Additional text slots to display multiple paragraphs.
- code (optional) - Code slots allows you to display code content within an inline alert component.
variant:
- info (default) — Use to add helpful information.
- help - Use to add brief steps from or links to other help topics.
- error - Use to highlight errors that may result from an action.
- success - Use to highlight success messages that may be displayed after an action.
- warning - Use to focus attention on a potential problem that could occur.
- neutral - Use as an all-purpose callout that displays a black border and no icon.

Examples

Info (Default)

data-slots=text

This is an info alert.

Help

data-slots=text

data-variant=help

This is an help alert.

Error

data-slots=text

data-variant=error

This is an error alert.

Success

data-slots=text

data-variant=success

This is a success alert.

Warning

data-slots=text

data-variant=warning

This is a warning alert.

Neutral

data-slots=text

data-variant=neutral

This is a neutral alert.

Richer Inline Alert

data-variant=help

data-slots=heading, text1, text2, text3, text4

Alternative steps:

Step 1: This is faux step text for the text1 slot. This is faux step text for the text1 slot. This is faux step text for the text1 slot. This is faux step text for the text1 slot. This is faux step text for the text1 slot.

Step 2: This is faux step text for the text2 slot. This is faux step text for the text2 slot. This is faux step text for the text2 slot.

Step 3: This is faux step text for the text3 slot.

Step 4: This is faux step text for the text4 slot. This is faux step text for the text3 slot.

Inline alert with code

data-slots=header, code

data-variant=info

Example for inline alert with code

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Inline Alert")); // Output: Hello, Inline Alert!!