Inline message

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

Usage

Code

Accessibility

Congratulations! The exercise has been solved and saved.

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

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.

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.

Variants

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.

Anatomy

Item	Name	Description	Optional
1	Icon	Indicates the status or intent.	yes
2	Title	Reinforces the message text.	no
3	Message	Communicates what’s about to happen or has happened.	yes
4	Close button	Icon button for closing the dialog	yes

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.

Item	Options	Description
Variant	`info` `success` `warning` `danger`	The inline message comes in four variants
Inline message	`value`	To insert the text of the title
Desription	`boolean`	To turn the description on or off. Default value is `on`.
Icon	`boolean`	To turn the icon on or off. Default value is `on`.
Close button	`boolean`	To 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...
    <ul>
      <li>Last name is required</li>
      <li>...</li>
    </ul>
  </sl-inline-message>

API

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

Properties

Name	Attribute	Type	Default	Description
`indismissible`	`indismissible`	`boolean \| undefined`	`false`	If set, will remove the ability to dismiss the inline message by removing the close button.
`size`	`size`	`'auto' \| 'sm' \| 'md' \| 'lg'`	`'auto'`	The size of the inline message. By default this is set to `'auto'` which means the component will automatically determine the size based on the content. If the content spans more than 2 lines, the size will be set to `'lg'`. If a title is present, the size will be set to `'lg'`. Otherwise the size will be set to `'md'`. If you want to explicitly set the size the `'sm'`, `'md'`, or `'lg'`, you can do so. But beware that some sizes may not work well with the content. `'sm'` and `'md'` for example are not meant to be used with a title.
`variant`	`variant`	`'info' \| 'success' \| 'warning' \| 'danger' \| undefined`	`'info'`	The variant of the inline message.

Events

Name	Event type	Description
`sl-dismiss`	`SlDismissEvent`	Emits when the inline message is dismissed.

Slots

Name	Description
`default`	The body of the inline-message
`icon`	Icon shown on the left side of the component
`title`	Title content for the inline message
`action`	Optional action button

Announcements

When adding an inline message dynamically after page load, either after a direct user action (a warning that a form is not filled in correctly) or for other reasons (timeout, lost connection, new message) it is important to also let screen reader users know some new text has appeared on the page.

You can use the Announcer utility (announce function) to inform users about the new message. Here you can find an example of how to use the Announcer utility when showing a message.

It is also good practice to make sure the keyboard focus lands on a logical place after the message is closed. You can do this in an event handler that listens to the sl-dismiss event on the inline message.

WAI-ARIA

In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningfull value, because it relies on the context or way a component is used.

For this component we can't think of any common scenarios that require you to add specific attributes, but keep in mind that if you use images or icons that (partially) replace text you need to provide an alternative for assistive technology, by adding an alttext or aria-label as you normally would.

Interactive example