syidaxdesign system
Home Pricing Settings
ComponentsFeedback

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.
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.

  1. 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.

  2. Connect content and actions

    Set the content with message and offer a follow-up action through btnLabel or the action slot.

  3. 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>

API reference

#

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

<sy-inline-message>

Properties

Attribute / PropertyTypeDefaultDescription
'informational' | 'info' | 'success' | 'warning' | 'error''informational'Component display style.
string'Inline message'Help text about the input state.
booleantrueShow the status icon.
booleanundefinedShow the status icon.
booleanfalseShow an action button in the message.
booleanfalseShow the contextual help popup.
'click' | 'focusout''click'click toggles it when the parent is clicked. focusout shows it when focus leaves the parent.
string''Action button text.
'top' | 'bottom' | 'left' | 'right''bottom'Preferred popup position relative to the trigger.
'top' | 'bottom' | 'left' | 'right'undefinedItem layout direction.
booleanfalseKeep the popup visible when the parent scrolls out of view.
| 'none' | 'fade' | 'fade-scale' | 'zoom' | 'pop' | 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right' | 'slide-fade-top' | 'slide-fade-bottom' | 'slide-fade-left' | 'slide-fade-right' | 'reveal-top' | 'reveal-bottom' | 'reveal-left' | 'reveal-right' | 'flip-x' | 'flip-y' | 'bounce' | 'spin''none'Enter/exit animation type. `none` (default) toggles instantly.
'x-fast' | 'fast' | 'medium' | 'slow' | 'x-slow''fast'Animation playback speed token. Maps to `--transition-*` global tokens.

Events

EventDetailDescription
CustomEvent<MouseEvent>Read the result from the event's detail.
CustomEvent<MouseEvent>Read the result from the event's detail.
CustomEvent<void>Read the result from the event's detail.

Methods

MethodReturnsDescription
Promise<void>Show the notification.
Promise<void>Hide the currently displayed notification.

Slots

SlotDescription
Content displayed in the action area.
Design SystemTab Navigate Enter Open