Fluent UI Message Bar in the SharePoint Framework (SPFx) Web Part

This article demonstrates how to implement the Fluent UI Message Bar in the SharePoint Framework (SPFx) web part.
The Fluent UI MessageBar provides a simple and effective way to display messages like success, warning, error, or informational alerts within your SharePoint pages.

⚙️ Install Required Dependencies

Install the Fluent UI React library:

npm install @fluentui/react --save

This library provides prebuilt UI components, including the MessageBar used in this example.

🧩 Define Props and State

Create or update the following interface file: IFluentUIMessagebarState.ts

export interface IFluentUIMessagebarState {
  success: boolean;
  error: boolean;
  warning: boolean;
  info: boolean;
  blocked: boolean;
  text: string;
}

⚛️ Implement the MessageBar Component

Edit the main component file: FluentUIMessagebar.tsx

import * as React from 'react';
import styles from './FluentUIMessagebar.module.scss';
import { IFluentUIMessagebarProps } from './IFluentUIMessagebarProps';
import { IFluentUIMessagebarState } from './IFluentUIMessagebarState';
import { PrimaryButton, Stack, MessageBar, MessageBarType } from '@fluentui/react';

export default class FluentUIMessagebar extends React.Component<IFluentUIMessagebarProps, IFluentUIMessagebarState> {
  constructor(props: IFluentUIMessagebarProps) {
    super(props);
    this.state = {
      success: false,
      error: false,
      warning: false,
      info: false,
      blocked: false,
      text: ''
    };
  }

  private showMessage(type: MessageBarType, text: string): void {
    this.setState({
      success: type === MessageBarType.success,
      error: type === MessageBarType.error,
      warning: type === MessageBarType.warning,
      info: type === MessageBarType.info,
      blocked: type === MessageBarType.blocked,
      text: text
    });
  }

  private closeMessage(): void {
    this.setState({
      success: false,
      error: false,
      warning: false,
      info: false,
      blocked: false,
      text: ''
    });
  }

  public render(): React.ReactElement<IFluentUIMessagebarProps> {
    return (
      <div className={styles.fluentUIMessagebar}>
        <Stack tokens={{ childrenGap: 10 }}>
          <PrimaryButton text="Show Success" onClick={() => this.showMessage(MessageBarType.success, 'Operation completed successfully!')} />
          <PrimaryButton text="Show Error" onClick={() => this.showMessage(MessageBarType.error, 'An error occurred while processing!')} />
          <PrimaryButton text="Show Warning" onClick={() => this.showMessage(MessageBarType.warning, 'Please be cautious!')} />
          <PrimaryButton text="Show Info" onClick={() => this.showMessage(MessageBarType.info, 'This is an informational message.')} />
          <PrimaryButton text="Show Blocked" onClick={() => this.showMessage(MessageBarType.blocked, 'Access is restricted!')} />
        </Stack>

        <br />

        {this.state.text && (
          <MessageBar
            messageBarType={
              this.state.success ? MessageBarType.success :
              this.state.error ? MessageBarType.error :
              this.state.warning ? MessageBarType.warning :
              this.state.info ? MessageBarType.info :
              MessageBarType.blocked
            }
            onDismiss={() => this.closeMessage()}
            isMultiline={false}>
            {this.state.text}
          </MessageBar>
        )}
      </div>
    );
  }
}

💡 Explanation

MessageBarType.success: Displays success messages (green).
MessageBarType.error: Displays error alerts (red).
MessageBarType.warning: Shows warning messages (yellow).
MessageBarType.info: Provides informational messages (blue).
MessageBarType.blocked: Indicates blocked or restricted access (gray).

🧠 Example Output

Once deployed, users can click the buttons to show different message types dynamically.
Each message bar also includes a dismiss button to close the message manually.

🚀 Deploy the Solution

Run the following commands to bundle and deploy:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog and deploy it to your site.

📂 GitHub Source

View full SPFx project on GitHub:Fluent UI Message Bar in SPFx

GitHub

✅ Summary

This solution demonstrates how to use Fluent UI’s MessageBar to display interactive notifications in SPFx web parts.
You can extend it to handle custom alerts, form validations, or status updates for better user experience.