@ui5/webcomponents-react/dist/webComponents/MessageStrip/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import '@ui5/webcomponents/dist/MessageStrip.js';
import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * The ui5-message-strip component allows for the embedding of application-related messages.
 * It supports four semantic designs, each with its own color and icon: "Information", "Positive", "Critical", and "Negative".
 * Additionally, users can choose from two color sets ("ColorSet1" and "ColorSet2"), each containing 10 predefined color schemes.
 * Each message shows a "Close" button, so that it can be removed from the UI, if needed.
 *
 * ### Usage
 *
 * For the `MessageStrip` component, you can define whether it displays
 * an icon in the beginning and a close button. Moreover, its size and background
 * can be controlled with CSS.
 *
 * ### Keyboard Handling
 *
 * #### Fast Navigation
 * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
 * In order to use this functionality, you need to import the following module:
 * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
 *
 *
 *
 * __Note:__ This is a UI5 Web Component! [MessageStrip UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/MessageStrip) | [Repository](https://github.com/UI5/webcomponents)
 */
const MessageStrip = withWebComponent('ui5-message-strip', ['colorScheme', 'design'], ['hideCloseButton', 'hideIcon'], ['icon'], ['close']);
MessageStrip.displayName = 'MessageStrip';
export { MessageStrip };