Inline message

Inline messages communicate contextual information. They’re positioned inline, close to the element they’re adding context to.

Congratulations! The exercise has been solved and saved.
  <sl-inline-message variant="success">
    <span slot="title">Congratulations!</span>
    The exercise has...

When to use

Contextual messages

Use an inline message to provide additional context or supporting information to a particular UI element or function.

Real-time feedback

Use an inline message to provide real-time feedback with information about what's going to happen or has happened.

When not to use

Critical information

Avoid using inline messages for critical system-level messages such as errors (e.g. loss of functionality). For critical messages, a component that partially or fully interrupts the user experience is more appropriate. Inline messages are not suitable for conveying critical system-level messages, such as errors or significant loss of functionality. Critical alerts require immediate attention and should not be buried within the regular flow of content. Users need a more prominent and disruptive notification to address critical issues. For critical messages, consider using components that partially or fully interrupt the user experience, such as a dialog or banner. These ensure that users cannot miss important information.

Single input

Avoid using inline messages to add context to a single input field (e.g., a text field). Inline messages are meant to provide additional context or supporting information related to UI elements. However, for a single input, they can clutter the interface and distract users from their primary task. Instead of inline messages, use hints to guide users. Hints are less intrusive and provide concise instructions without overwhelming the user.


Inline messages come in various flavors, each suited for specific situations: Info: For general informative messages. Success: To indicate successful completion of an action. Danger: To highlight critical errors or issues. Warning: For potential problems that need attention.


1IconIndicates the status or intent.yes
2TitleReinforces the message
3MessageCommunicates what’s about to happen or has happened.yes
4Close buttonIcon button for closing the dialogyes

Figma Options

With these options you can tweak the appearance of the inline message in Figma. They are available in the Design Panel so you can compose the inline message to exactly fit the user experience need for the uses case you are working on.

Variantinfo success warning dangerThe inline message comes in four variants
Inline messagevalueTo insert the text of the title
DesriptionbooleanTo turn the description on or off. Default value is on.
IconbooleanTo turn the icon on or off. Default value is on.
Close buttonbooleanTo turn the close button on or off. Default value is on.
There are some problems Please fulfill all required fields:
  • Last name is required
  • School name is required
  <sl-inline-message variant="danger">
    <span slot="title">There are some problems</span>
    Please fulfill all...
      <li>Last name is required</li>


Component has a range of properties to define the experience in different use cases.


indismissibleindismissibleboolean | undefinedWill hide the close button if set.
variantvariant'info' | 'success' | 'warning' | 'danger''info'The variant of the inline message.


NameEvent typeDescription
sl-dismissSlDismissEventEmits when the inline message is dismissed.


defaultThe body of the inline-message
iconIcon shown on the left side of the component
titleTitle content for the inline message
actionOptional action button


WAI-ARIA Roles, States, and Properties for an inline message provide essential information to assistive technologies and screen readers. They convey the inline message's role, state, and additional properties to ensure accessibility and a better user experience for individuals using assistive technology.Specifies whether the attribute is always set in the component (no) or it can be provided by the developer (yes)

AttributeValueDescriptionUser supplied
role'alert', 'status'Identifies the role of the Inline Message depending on its variant. Role 'alert' is set when the variant is danger or warning, role 'status' is set when the variant is info or
aria-labelstringDefines the aria-label of the inline message.yes
Interactive example