@carbon/ibm-products/lib/components/InlineTip/InlineTip.d.ts

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2023, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, { ReactNode } from 'react';
export interface InlineTipProps {
    /**
     * Optional "call to action" ghost button or link that can appear
     * directly below the content. This component comes with pre-styled
     * elements available to use: `InlineTipLink` and `InlineTipButton`.
     */
    action?: ReactNode;
    /**
     * Provide the contents of the InlineTip.
     */
    children: ReactNode;
    /**
     * Provide an optional class to be applied to the containing node.
     */
    className?: string;
    /**
     * Tooltip text and aria label for the Close button icon.
     */
    closeIconDescription?: string;
    /**
     * The label for the collapse button.
     * This button is not visible if `media` is specified.
     */
    collapseButtonLabel?: string;
    /**
     * If set to `true`, it will truncate the body text to
     * one line and expose an expand/collapse button toggle.
     *
     * This feature is disabled if `media` is specified.
     */
    collapsible?: boolean;
    /**
     * The label for the expand button.
     * This button is not visible if `media` is specified.
     */
    expandButtonLabel?: string;
    /**
     * Optional prop to render any media like images or any animated media.
     */
    renderMedia?: () => ReactNode;
    /**
     * Set to `true` to arrange the information in a format
     * that is easier to read in a limited space.
     */
    narrow?: boolean;
    /**
     * Function to call when the tertiary button is clicked.
     */
    onClick?: () => void;
    /**
     * Function to call when the InlineTip is closed via the "X" button.
     */
    onClose?: () => void;
    /**
     * Defining the label will show a the tertiary button with the crossroads icon.
     * You will still need to define the `onClose` method to trigger a callback.
     */
    tertiaryButtonLabel?: string;
    /**
     * The title of the InlineTip.
     */
    title: string;
    /**
     * If true, insert 1 rem of "space" on the left of the component.
     * This will allow the component's content to line up with other
     * content on the page under special circumstances.
     *
     * This will only be applied when `narrow` is false.
     */
    withLeftGutter?: boolean;
}
/**
 * Inline tips are messages embedded within other components that
 * provide an ambient way to deliver learning content without
 * distracting the user from their flow.
 */
export declare let InlineTip: React.ForwardRefExoticComponent<InlineTipProps & {
    children?: ReactNode | undefined;
} & React.RefAttributes<HTMLDivElement>>;