Inline Message

Show contextual feedback near an input or action element.

<sy-inline-message>Installation guide Basic usage

Live preview

Interact with the component to see results here.

StatusPlaceholderDisplay directionAction text

Show iconShow initially

View code

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>View help</sy-button>
  <sy-inline-message
    message="Save your changes before continuing."
    variant="informational"
    placement="bottom"
    icon
    btnlabel="Confirm"
    id="sample"
  ></sy-inline-message>
</div>

Usage guide

Show input errors or help near the related element. Use Banner for broad notices and Toast for brief completion feedback.

Place inside the target element
Place it inside the parent that acts as the trigger. The message is portaled into the body, but its position follows that parent.
Connect content and actions
Set the content with message and offer a follow-up action through btnLabel or the action slot.
Choose when to show it
Manage visibility through clicks, focus departure, or show() and hide(). Clicking outside closes it.

Examples

Show nearby guidance

Click the button to open a nearby message.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>View help</sy-button>
  <sy-inline-message message="Save your changes before continuing." id="sample">
  </sy-inline-message>
</div>

Input error

Display an error close to its related help button.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>View help</sy-button>
  <sy-inline-message
    message="Enter the required information."
    variant="error"
    btnlabel="Confirm"
    id="sample"
  ></sy-inline-message>
</div>

Display direction

If space is limited, the position adjusts to stay within the screen.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>View help</sy-button>
  <sy-inline-message
    message="Display related help alongside the element."
    placement="right"
    id="sample"
  ></sy-inline-message>
</div>

Open and close externally

show and hide control the popup state directly.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>View help</sy-button>
  <sy-inline-message message="Save your changes before continuing." id="sample">
  </sy-inline-message>
</div>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Display</sy-button>
  <sy-button id="action-1" size="small">Hide</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.show();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.hide();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Concise guidance

Omit the icon to focus on the message.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>View help</sy-button>
  <sy-inline-message
    message="Enter up to 20 characters."
    icon="false"
    id="sample"
  ></sy-inline-message>
</div>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>View help</sy-button>
  <sy-inline-message
    message="Save your changes before continuing."
    variant="informational"
    placement="bottom"
    icon
    btnlabel="Confirm"
    id="sample"
  ></sy-inline-message>
</div>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["actionClick", "btnClick", "dismiss"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Follow-up actions in messages

Enable action and place a button in the action slot to offer recovery or more information. Click the example button to display the recovery result.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>View help</sy-button>
  <sy-inline-message
    message="Save your changes before continuing."
    variant="informational"
    placement="bottom"
    icon
    btnlabel="Confirm"
    open
    action
    showicon
    id="sample"
  ></sy-inline-message>
</div>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "action": true,
    "showIcon": true,
    "open": true
  });
  await (root => {
    const message = root.querySelector('sy-inline-message'),
      button = document.createElement('sy-button');
    button.slot = 'action';
    button.textContent = _msg("m_86cebcee7e8f");
    button.addEventListener('click', () => {
      message.message = _msg("m_c0d096f60949");
    });
    message.append(button);
  })(document);
</script>

Success feedback

Show a success message after saving changes.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>View help</sy-button>
  <sy-inline-message
    message="Your changes have been saved."
    variant="success"
    placement="bottom"
    icon
    btnlabel="Confirm"
    open
    id="sample"
  ></sy-inline-message>
</div>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "variant": "success",
    "open": true,
    "message": "Your changes have been saved."
  });
</script>

Feature examples

Choose a feature from 12 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.