Callout
Callouts display important information to users in a prominent way. They can highlight warnings, errors, success messages, or general information and remain visible as part of the static page layout.
Practice mode
Answers in practice mode are not graded. You can retry each question as many times as you need. Check the grading policy for more details.<sl-callout variant="info">
<h2 slot="title">Practice mode</h2>
Answers in practice mode are not graded. You can retry each question as many times as you need. Check the
<a href="/grading-policy">grading policy</a> for more details.
</sl-callout>When to use
Persistent Context
Use Callout when guidance should stay visible because it remains relevant while the user continues working. It can be placed at the page level or within a specific section to support scanning without interrupting the flow. This includes informational notes such as policy reminders and setup requirements, and caution states such as offline mode, unsaved changes, or incomplete setup.
Suggested Actions
Use Callout when the message benefits from interactions to improve usability. The action should be clear, specific, and directly related to resolving the caution or progressing the task. It can be a button that performs an action such as saving, uploading, or editing, or a link that navigates the user to a relevant destination, such as a settings page or a user profile.
This ability to host actions is exclusive to Callout. Inline message stays non-interactive.
When not to use
Immediate Feedback
Avoid Callout for event-driven messages that are short-lived or optional to keep on screen. If the user can safely ignore or dismiss the information without losing page context, a persistent Callout adds unnecessary noise. Use an Inline message instead.
Complex Scenarios
Avoid Callout when the user must complete multiple steps, compare options, or follow a decision path, and when the situation is critical and must be resolved before continuing. Callouts should stay lightweight and can be overlooked. Use a dedicated page for richer guidance, and a Dialog pattern for blocking interruptions.
Anatomy
| Item | Name | Description | Optional |
|---|---|---|---|
| 1 | Container | Fixed area within the layout at page or section level. | no |
| 2 | Icon | Indicates meaning and intent, especially for caution. | yes |
| 3 | Title | Short text describing the situation and its impact. | no |
| 4 | Description | Main message text. Can appear without a title. | yes |
| 5 | Content | Optional slot for custom content, mainly buttons and links. | yes |
Variants
Use variants to match the intent of the message and the level of emphasis needed.
- Info (default): Provides persistent guidance or contextual notes.
- Success: Confirms a state or outcome that remains relevant in the layout.
- Warning: Highlights risk, incomplete setup, or conditions that may affect outcomes.
- Danger: Indicates a problem that may block progress or requires attention.
Density
Density sets the spacing of the Callout to match the content and the surrounding layout.
- Default: Standard spacing for most pages.
- Relaxed: More breathing room for long text, lower visual noise, or touch-friendly layouts.
Figma Properties
| Item | Options | Description |
|---|---|---|
| Variant | info, success, warning, danger | Sets the semantic intent of the Callout. |
| Density | default, relaxed | Sets the spacing density for the Callout. |
| Show Title | boolean | Controls whether the title is displayed. |
| Title | text | Title text shown when Show Title is enabled. |
| Description | text | Main message text displayed in the Callout. |
| Show Content | boolean | Controls visibility of the callout content. |
| Swap Slot | select | Swaps the slot component placed in the callout for your custom content component. |
| Icon | nested component | Nested icon instance used in the Callout. |
Behaviours
Callout behaviours focus on persistence, placement in the layout, and lightweight interactions.
Layout Element
It is intentionally placed and remains visible within the page structure, near the content it relates to. It is not event-driven or temporary, and it remains visible in the layout even after the user completes any actions within it.
Interaction model
Callouts can include interactive elements, but interactions should stay simple. Prefer a single button, and use links only for simple navigation to a relevant destination, such as settings or a related page. Avoid multiple competing actions.
Content guidelines
Choose an icon that reinforces the intent, and keep the copy concise. Aim for a short caution statement and, if necessary, a single sentence describing the consequence. If an action is present, it should clearly resolve or progress the situation.
Inline Message Relationship
Callout is placed in the layout to provide persistent context and contain actions. Inline message is event-driven feedback after an action and stays non-interactive.
Related components
- Inline message: Event-driven feedback that appears after a user or system action and remains non-interactive.
- Dialog: A blocking surface for critical acknowledgements or confirmations. Unlike Inline message, it interrupts the flow so it can’t be missed.
New learning module available
Your teacher has added a new module: Introduction to Fractions Complete it before the end of the week to stay on track.Start module
<sl-callout density="relaxed" variant="warning">
<h2 slot="title">New learning module available</h2>
<div class="content">
Your teacher has added a new module:
<a href="/introduction-to-fractions">Introduction to Fractions</a>.
Complete it before the end of the week to stay on track.
<sl-button fill="outline" variant="warning">
Start module
</sl-button>
</div>
</sl-callout>Link styling
If your application has global link styles, or if links are nested inside other elements (like <p>, <span>, or <div>), we recommend using the global.css file from your theme package. The component cannot style nested slotted elements, so global.css makes sure links always look correct.
API
Component has a range of properties to define the experience in different use cases.
Properties
| Name | Attribute | Type | Default | Description |
|---|---|---|---|---|
density | density | 'default' | 'relaxed' | undefined | 'default' | The density of the callout. |
variant | variant | 'info' | 'success' | 'warning' | 'danger' | undefined | 'info' | The variant of the callout. |
Slots
| Name | Description |
|---|---|
default | The body of the callout. |
icon | Icon shown on the left side of the component. |
title | Title content for the callout. |
Static vs dynamic messaging
Callouts are designed to be part of the static page layout and are not announced as live regions. They do not use ARIA role="alert" or role="status" as they're not meant to interrupt the user's workflow.
For dynamic feedback messages that appear/disappear in response to user actions, use the Inline Message component instead, which includes proper ARIA live region announcements.
Callout title
We recommend using a heading element (e.g. <h2>) for the Callout title. This way, screen readers announce it as a heading, making it easier to find and understand what the callout is about.
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 meaningful 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.