The Message bar web part shows a colored bar, with an icon, to announce a piece of information, a success, a warning or an error on your SharePoint pages. You type the message directly on the page and choose its type in the panel.

This article describes the web part's use cases, how to get started, its settings, entering the message on the page and the best practices to follow.

📋 Contents

1. About the web part
2. Add the web part to your page
3. Configure the web part
4. Enter and format the message on the page
5. Best practices
6. What changes from the previous version

1. About the web part

The Message bar is a bar that spans the full width of its column. Its color and icon depend on the message's Type: News flash, Success, Warning, Severe warning or Error.

💡 The web part has no title and no frame: only the bar shows on the page. That's why its panel has no Title or Appearance section.

Use cases

• Publish a news flash at the top of a home page.
• Confirm that an operation is complete, such as a migration.
• Warn about scheduled maintenance.
• Report an ongoing incident.

2. Add the web part to your page

1. Open the SharePoint page in edit mode by clicking Edit at the top right.
2. Where you want the web part, click the "+" button to open the web part catalog.
3. Search or scroll the catalog to select Jint - Message bar, in the "Text, media, and content" category.
4. The web part is added where you want it, with its default values.

A newly inserted Message bar is of type News flash, with an empty message that shows "Enter your message". This placeholder text is only visible in edit mode: as long as the message is empty, your visitors don't see the web part.

3. Configure the web part

The configuration panel has three tabs: Design, Content and Visibility. Each setting applies to the page immediately.

3.1 Design tab

Message

Choose the type from the buttons offered: the bar changes its look on the page right away. Each type's background, border and icon have fixed colors, whatever your site's theme.

The section reminds you that "The message is edited directly on the page." (see part 4).

⚠ Changing the Type resets the whole message to the new type's text color: the colors chosen with the toolbar are lost. Choose the type before coloring the text.

Corner radius

Turn on Round the bar corners to round the corners of the bar. The Soft, Medium and Marked levels then appear, with Medium preselected. For a precise radius, click the Custom corner radius button: the Custom radius field appears, set to the radius of the level chosen before.

3.2 Content tab

Accessibility

The Accessibility section measures the contrast between the message and the bar's background. You have nothing to select: it measures the message as soon as the panel opens, and measures it again after each change.

It shows the name of the measured text, Message, its contrast Ratio and its Overall readability:

• Excellent: the contrast reaches level AAA.
• Good: the contrast reaches level AA.
• Insufficient: the contrast doesn't reach level AA.

If the message has several colors, the section keeps the lowest contrast.

When the section shows Insufficient, click Fix: each color of the message below level AA is replaced by the closest palette color that reaches it.

As long as the message is empty, the section shows "Enter a message on the page to check its contrast."

3.3 Visibility tab

Audience

Turn on Custom audience to restrict the web part to people or to members of Microsoft 365 groups. Only the chosen visitors, or members of at least one chosen group, see it. For everyone else, it takes up no space on the page.

Display

Turn on Schedule visibility to limit the display in time, with a Display start, a Display end, or both. Each date appears when you turn its switch on: the start is set to the present moment, the end to 7 days later.

⚠ If you turn on Custom audience without choosing anyone, no one sees the web part anymore. The section warns you: "No one can see this web part: choose at least one person or group."

⚠ If the display end comes before the start, the panel shows "The end date must be later than the start date." and the schedule doesn't limit the display until you fix it.

💡 In edit mode, you always see the web part, whatever its audience or schedule. A badge tells you so: "Audience", or the display dates.

4. Enter and format the message on the page

The message is entered directly on the page, not in the configuration panel. Click the bar: the message becomes editable and a toolbar shows above it. Click outside the message and the toolbar to confirm.

Enter the message

• Enter starts a new line. Your visitors see the line breaks as you typed them.
• The bar adapts its height to the length of the message.
• Pasted text loses its original formatting.
• A word too long for the width of the bar is broken.
• The message shows exactly as you typed it, without automatic translation.
• A message that only contains spaces or line breaks is considered empty: your visitors don't see the web part.

⚠ The message can't contain a link.

Format the message

The toolbar sets the Text style (H1 to H4 or Body), the Font, the Font size, the Text color, bold, italic, underline and alignment. If space runs short, some controls fold behind the More button.

• If you select part of the message, font, size, color, bold, italic and underline apply to the selection only. Without a selection, they apply to the whole message.
• Alignment always applies to the whole message.
• The Reset formatting button resets the whole message to its default formatting.

By default, the message uses its type's text color, at 14 px.

5. Best practices

Choose the type according to severity

Your visitors associate each color with a level of urgency. Keep Error and Severe warning for situations that call for action or block work, so they keep their impact.

Keep the message short

One or two sentences are enough. For longer content, link readers to a news post or a dedicated page.

Check the contrast after coloring the text

After changing the message's color, look at the Accessibility section of the Content tab. Aim for at least Good, or click Fix.

Schedule the end of a temporary message

For maintenance or an incident, turn on Display end in the Visibility tab: the message disappears on its own once the date has passed.

6. What changes from the previous version

If you used the previous version of the web part (see the article Message bar component):

• The News flash type replaces Information and becomes the default type. Success, Warning, Severe warning and Error are still offered.
• The message is entered and formatted directly on the page, with the text toolbar: font, size, color, bold, italic, underline and alignment. It can span several lines.
• New Corner radius section, to round the corners of the bar.
• New Accessibility section, which measures the message's contrast and fixes it in one click.
• The panel is organized in three tabs, Design, Content and Visibility. The Visibility tab lets you restrict the web part to an audience and schedule its display.
• As long as the message is empty, the web part stays invisible to your visitors.