Skip to main content

MessageBar

MessageBar shows an inline message — info, success, warning, or error — with an icon and optional trailing action button. Use it for contextual feedback that stays in the page flow (as opposed to a toast or dialog).

When to use​

  • Inline status or validation feedback above a form or section.
  • Non-blocking notices ("Draft saved", "Connection lost — retrying").

For transient, stacked notifications use NotificationCenter instead.

Import​

import { MessageBar } from '@spartanfx/react';

Basic usage​

Set the type and pass the message as children.

import { MessageBar } from '@spartanfx/react';

<MessageBar type="success">Your changes have been saved.</MessageBar>
<MessageBar type="error">Couldn't reach the server. Try again.</MessageBar>

With an action​

Add a trailing action via buttonProps:

<MessageBar
  type="warning"
  buttonProps={{ text: 'Retry', onClick: () => retry() }}
>
  Connection lost.
</MessageBar>

Key props​

PropTypeDefaultNotes
typeMessageBarType'info'info, success, warning, severeWarning, error, or idea.
buttonPropsobject—Trailing action button (text + handler).
(children)ReactNode—The message content.

See the full generated reference: MessageBar API ↗.

See also​