Inline Message

Inline messages provide contextual feedback about a specific action or state, inside the component they refer to.

Your changes have been saved.

Usage

forge-inline-message communicates persistent, contextual guidance through theme, with optional icon and title slots. Place it directly beside or inside the component it refers to, such as a form, field, or card. For a page-level announcement, use a banner instead; for a reactive confirmation of an action, use a toast instead; for high-priority information that needs a decision, use a dialog instead.

Rules

Use an inline message for reference or helper information scoped to a single component, like a form or field.

Keep the message succinct — two lines or fewer where possible.

Choose an icon that matches the message's theme (info, warning, success, error).

Don't

Don't use an inline message for a page-level announcement — use a banner instead.

Don't use an inline message to confirm an action the user just took — use a toast instead.

Don't use an inline message for high-priority information that requires a decision — use a dialog instead.

With a title

Add a title slot above the message body when the message needs a short heading of its own.

A title slot sits above the message body.

<forge-inline-message>
  <span slot="title">
    Lorem Ipsum
  </span>
  <p>
    Qui nulla anim sunt eiusmod eiusmod id esse veniam proident ea adipisicing ad exercitation.
  </p>
</forge-inline-message>

Theme

Set theme to error, warning, success, info (the default), or info-secondary to match the message’s meaning, and pair it with an icon in the icon slot that reinforces the same meaning.

Every inline message theme, each paired with an icon.

<div style="display: flex; gap: 16px; flex-direction: column">
  <forge-inline-message theme="error">
    <forge-icon slot="icon" name="info">
    </forge-icon>
    <p>
      Qui nulla anim sunt eiusmod eiusmod id esse veniam proident ea adipisicing ad exercitation.
    </p>
  </forge-inline-message>
  <forge-inline-message theme="warning">
    <forge-icon slot="icon" name="info">
    </forge-icon>
    <p>
      Qui nulla anim sunt eiusmod eiusmod id esse veniam proident ea adipisicing ad exercitation.
    </p>
  </forge-inline-message>
  <forge-inline-message theme="success">
    <forge-icon slot="icon" name="info">
    </forge-icon>
    <p>
      Qui nulla anim sunt eiusmod eiusmod id esse veniam proident ea adipisicing ad exercitation.
    </p>
  </forge-inline-message>
  <forge-inline-message theme="info">
    <forge-icon slot="icon" name="info">
    </forge-icon>
    <p>
      Qui nulla anim sunt eiusmod eiusmod id esse veniam proident ea adipisicing ad exercitation.
    </p>
  </forge-inline-message>
  <forge-inline-message theme="info-secondary">
    <forge-icon slot="icon" name="info">
    </forge-icon>
    <p>
      Qui nulla anim sunt eiusmod eiusmod id esse veniam proident ea adipisicing ad exercitation.
    </p>
  </forge-inline-message>
</div>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconInfo } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconInfo]);
</script>

Inline messages are used to provide feedback to the user about a specific action or state. Use inline messages to communicate information such as errors, warnings, or success messages in a way that is contextual to the content on the page.

import "@tylertech/forge/inline-message";

Properties

Property	Attribute	Type	Default	Description
`theme`	`theme`	`InlineMessageTheme`	`"info"`	The theme to apply.

Slots

Name	Description
`(default)`	The message text.
`title`	The title of the inline message.
`icon`	The icon to display.

CSS Parts

Name	Description
`::part(root)`	The root layout element.
`::part(container)`	The container element for the title and message content.

CSS Custom Properties

Name	Description
`--forge-inline-message-background`	The background color.
`--forge-inline-message-color`	The text color.
`--forge-inline-message-shape`	The shape (border) radius.
`--forge-inline-message-padding`	The padding around the content.
`--forge-inline-message-padding-inline`	The inline padding around the content.
`--forge-inline-message-padding-block`	The block padding around the content.
`--forge-inline-message-border-width`	The border width.
`--forge-inline-message-border-style`	The border style. Defaults to `none`.
`--forge-inline-message-border-color`	The border color.
`--forge-inline-message-gap`	The gap/space between the content elements.
`--forge-inline-message-icon-gap`	The gap/space between the icon and the content.
`--forge-inline-message-content-gap`	The gap/space between the title and the message.
`--forge-inline-message-icon-color`	The icon color.

Live-region behavior

For an important or urgent inline message, set role="alert" on forge-inline-message — this is equivalent to aria-live="assertive" and announces the message immediately. For something less urgent, use aria-live="polite" instead so it waits until the user finishes their current task before announcing.