Skip to main content
The Message component provides a flexible way to display contextual notifications and alerts with different visual styles and message types.

​
Basic usage

import { FlxMessage } from '@flowx/react-ui-toolkit';

function BasicMessage() {
  return (
    <FlxMessage type="info">
      This is an informational message.
    </FlxMessage>
  );
}

​
Message types

The Message component supports four types: 
<FlxMessage type="success">
  Your changes have been saved successfully.
</FlxMessage>
Use for positive feedback and successful operations.

​
Display modes

Control the visual appearance with display modes: 
import { FlxMessage } from '@flowx/react-ui-toolkit';

function DisplayModes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <FlxMessage type="info" display="text">
        Text display mode - minimal styling
      </FlxMessage>

      <FlxMessage type="info" display="border">
        Border display mode - outlined
      </FlxMessage>

      <FlxMessage type="info" display="fill">
        Fill display mode - filled background
      </FlxMessage>
    </div>
  );
}

​
Layout options

Choose between row and column layouts: 
import { FlxMessage } from '@flowx/react-ui-toolkit';

function MessageLayouts() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <FlxMessage type="warning" layout="row">
        Row layout - icon and text side by side
      </FlxMessage>

      <FlxMessage type="warning" layout="column">
        Column layout - icon above text
      </FlxMessage>
    </div>
  );
}

​
With custom icons

Replace the default icon with a custom one: 
import { FlxMessage, FlxIcon } from '@flowx/react-ui-toolkit';

function CustomIconMessage() {
  return (
    <FlxMessage 
      type="success" 
      display="fill"
      iconComponent={<FlxIcon name="checkCircle" />}
    >
      Payment processed successfully!
    </FlxMessage>
  );
}
Set iconComponent={null} to hide the icon completely if needed.

​
Complex content

Include rich content within messages: 
import { FlxMessage, FlxButton } from '@flowx/react-ui-toolkit';

function ComplexMessage() {
  return (
    <FlxMessage type="warning" display="border" layout="column">
      <div>
        <h4 style={{ margin: '0 0 8px 0' }}>Action Required</h4>
        <p style={{ margin: '0 0 12px 0' }}>
          Your subscription expires in 3 days. Renew now to avoid service interruption.
        </p>
        <FlxButton variant="fill" onClick={() => console.log('Renew clicked')}>
          Renew Subscription
        </FlxButton>
      </div>
    </FlxMessage>
  );
}

​
Dismissible messages

Create messages that users can close: 
import { FlxMessage, FlxIcon } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

function DismissibleMessage() {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <FlxMessage 
      type="info" 
      display="fill"
      style={{ position: 'relative' }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
        <span>This message can be dismissed.</span>
        <button 
          onClick={() => setVisible(false)}
          style={{ 
            background: 'none', 
            border: 'none', 
            cursor: 'pointer',
            padding: '4px'
          }}
          aria-label="Close message"
        >
          <FlxIcon name="close" />
        </button>
      </div>
    </FlxMessage>
  );
}

​
Form validation messages

Use messages for form validation feedback: 
import { FlxMessage } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

function FormValidation() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const validateEmail = (value) => {
    if (!value.includes('@')) {
      setError('Please enter a valid email address');
    } else {
      setError('');
    }
  };

  return (
    <div>
      <input 
        type="email" 
        value={email}
        onChange={(e) => {
          setEmail(e.target.value);
          validateEmail(e.target.value);
        }}
        placeholder="Email address"
      />
      {error && (
        <FlxMessage type="error" display="text" style={{ marginTop: '8px' }}>
          {error}
        </FlxMessage>
      )}
    </div>
  );
}

​
Notification stack

Display multiple messages in a stack: 
import { FlxMessage } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

function NotificationStack() {
  const [messages, setMessages] = useState([
    { id: 1, type: 'success', text: 'Profile updated successfully' },
    { id: 2, type: 'warning', text: 'Password expires in 7 days' },
    { id: 3, type: 'info', text: 'New message from support' }
  ]);

  const removeMessage = (id) => {
    setMessages(messages.filter(msg => msg.id !== id));
  };

  return (
    <div style={{ 
      position: 'fixed', 
      top: '20px', 
      right: '20px', 
      width: '300px',
      display: 'flex',
      flexDirection: 'column',
      gap: '12px'
    }}>
      {messages.map(msg => (
        <FlxMessage 
          key={msg.id}
          type={msg.type}
          display="fill"
        >
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>{msg.text}</span>
            <button onClick={() => removeMessage(msg.id)}>×</button>
          </div>
        </FlxMessage>
      ))}
    </div>
  );
}

​
Props

​
type
'success' | 'warning' | 'error' | 'info'
default:"info"
The semantic type of the message, which determines the default icon and color scheme.
​
display
'text' | 'border' | 'fill'
default:"text"
The visual display style. text is minimal, border adds an outline, and fill uses a filled background.
​
layout
'row' | 'column'
default:"row"
Controls the arrangement of the icon and content. row places them side by side, column stacks them vertically.
​
iconComponent
ReactElement<FlxIconProps> | null
Custom icon to display. Pass null to hide the icon completely. If not provided, a default icon based on type is used.
​
children
ReactNode
required
The message content to display.
​
className
string
Additional CSS classes to apply to the message container.
​
style
CSSProperties
Inline styles to apply to the message container.

​
TypeScript

The Message component is fully typed: 
import type { 
  FlxMessageProps, 
  MessageType, 
  MessageDisplay, 
  MessageLayout 
} from '@flowx/react-ui-toolkit';

const messageConfig: FlxMessageProps = {
  type: 'success',
  display: 'fill',
  layout: 'row',
  children: 'Operation completed'
};

// Available types
const types: MessageType[] = ['success', 'warning', 'error', 'info'];
const displays: MessageDisplay[] = ['text', 'border', 'fill'];
const layouts: MessageLayout[] = ['row', 'column'];

​
Accessibility

  • Messages use appropriate ARIA roles based on type
  • Color is not the only indicator of message type (icons provide additional context)
  • Interactive elements within messages are keyboard accessible
  • Important messages should have role="alert" for screen reader announcements
For temporary notifications, consider using the Toast component instead, which provides automatic dismissal and positioning.
Avoid overwhelming users with too many simultaneous messages. Consider prioritizing or batching related notifications.

​
Best practices

  • Keep message text concise and actionable
  • Use the appropriate type to match the message severity
  • For critical errors, consider using the fill display mode for maximum visibility
  • Provide clear next steps or actions when appropriate
  • Use consistent message patterns throughout your application

Build docs developers (and LLMs) love

Get started for freeTalk to us