Feedback Messages

Prerequisites

Add FeedbackMessages component anywhere in your application. Note that:

• You do not need to wrap your application with FeedbackMessages component – it is not a provider, it is a regular component
• You should not render multiple FeedbackMessages components – if you do that, your messages will be duplicated

All set! You can now use all FeedbackMessages system features.

• The most basic usage of the FeedbackMessages component is to show a toast message. You can do this by calling the message function with a string as an argument. The message will be displayed in the top right corner of the screen.

Variants

• The message function supports different message types.
• You can use the alert, banner, and toast to display different types of messages.
• Default type is toast.

Sizes

• FeedbackMessages supports sizes sizes sm, md, lg, responsive, and can be changed by passing the size value.

• Default size is lg.

• You also override another size through message function.

Colors

• The message function supports 5 colors red, green, blue, orange and neutral and can be changed by passing the color value.
• Default color is blue.

Positions

• The message function supports 6 positions top-left, top-right, top-center, bottom-left, bottom-right and bottom-center and can be changed by passing the position prop.
• Default position is top-right.

• Another way to change the position of the message is passing the position prop to the FeedbackMessages component.
• It will change the default position of all messages in the app.

Prefix Icon

• The message function supports icons from the @ocean-network-express/magenta-ui/icons package.
• The prop icon support to add icon or other content to the left side.

Actions

• message function can include links by passing the urls or actions value depending on which type of message you are using.

Action Buttons

• The message function supports action buttons. You can add action buttons by passing the actions value.

• The actions value is an array of objects with the following properties:

  • label: The text to display on the button.
  • All other props are the same as the Button component.
  • Some default props in the action button are color is secondary, variant is outline, and size is md.

• Note: The actions value is only available for banner and toast types.

Links

• The message function can include links by passing the urls value.

• The urls value is an array of objects with the following properties:

  • displayText: The text to display on the link.
  • All other props are the same as the Link component.

• Note: The urls value is only available for alert and banner types.

Custom Links and Actions

You can custom links and actions by passing custom React components.

Close A Message

Remove Close Icon Button

• The message function can remove the close button icon or by setting the closable value to false.

Close duration

• By default, the messages will close automatically after 10 seconds.
• The message function can include the close duration by passing the duration value.

• To prevent the messages from closing automatically, set the duration value to 0 or Infinity.

• Another way to change the duration of the message is passing the duration prop to the FeedbackMessages component.
• It will change the default duration of all messages in the app.

Placement

• Customize the placement of messages by using the style prop on the FeedbackMessages component. This will modify the default offset for all messages.
• A common use case here is to display new notifications 48px below the navigation bar.

TypeScript

• FeedbackMessageType, FeedbackMessageColor ,and FeedbackMessagePosition are EnumValues exported from @ocean-network-express/magenta-ui/react.