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`		Will hide the close button if set.
`variant`	`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'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

WAI-ARIA

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)

Attribute	Value	Description	User 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 `success`.	no
`aria-label`	string	Defines the aria-label of the inline message.	yes

Interactive example