@atlaskit/inline-message/dist/types/components/inline-message/index.d.ts

An inline message lets users know when important information is available or when an action is required.

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { type FC, type ReactNode } from 'react';
import { type PopupProps } from '@atlaskit/popup';
import type { IconAppearance, IconSpacing, PopupPlacement } from '../../types';
interface InlineMessageProps extends Pick<PopupProps, 'fallbackPlacements'> {
    /**
     * The elements to be displayed by the popup.
     */
    children?: ReactNode;
    /**
     * The placement to be passed to the popup. Determines where around
     * the text the dialog is displayed.
     */
    placement?: PopupPlacement;
    /**
     * Text to display second.
     */
    secondaryText?: ReactNode;
    /**
     * Text to display first, bolded for emphasis.
     */
    title?: ReactNode;
    /**
     * Set the icon to be used before the title. Options are: connectivity,
     * confirmation, info, warning, and error.
     */
    appearance?: IconAppearance;
    /**
     * The spacing of the underlying icon button. Options are: spacious and compact.
     */
    spacing?: IconSpacing;
    /**
     * A unique string that appears as a data attribute, `data-testid`,
     * in the rendered code. It is provided to serve as a hook for automated tests.
     *
     * The value of `testId` is attached to the different sub-components in Inline Message:
     *  - `testId`: the top-level inline message component
     *  - `testId--popup`: the content of the message
     *  - `testId--button`: the button element that opens the dialog on press
     *  - `testId--title`: the title of the message
     *  - `testId--text`: the text of the message
     */
    testId?: string;
    /**
     * Text to be used as the label for the button icon. You must use this to provide information for people who use assistive technology when there is no title and/or secondaryText.
     */
    iconLabel?: string;
}
/**
 * __Inline message__
 *
 * An inline message lets users know when important information is available or when an action is required.
 *
 * - [Examples](https://atlassian.design/components/inline-message/examples)
 * - [Code](https://atlassian.design/components/inline-message/code)
 * - [Usage](https://atlassian.design/components/inline-message/usage)
 *
 * @example
 *
 * ```jsx
 * const Component = () => (
 *   <InlineMessage
 *    title="Inline Message Title Example"
 *    secondaryText="Secondary Text"
 *   >
 *    <p>Some text that would be inside the open dialog and otherwise hidden.</p>
 *   </InlineMessage>
 * );
 * ```
 */
declare const InlineMessage: FC<InlineMessageProps>;
export default InlineMessage;