@procore/core-react/dist/Banner/Banner.d.ts

React library of Procore Design Guidelines

import React from 'react';
import type { Props } from '../_utils/types';
import type { BannerExpandableContentProps, BannerExpandActionButtonProps, BannerIconProps, BannerProps, BannerVariant } from './Banner.types';
export declare const ErrorBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
export declare const InfoBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
/**
 * @since 11.26.0
 */
export declare const AttentionBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
/**
 * @deprecated ActionBanner was renamed to AttentionBanner.
 * @deprecatedSince 11.26.0
 */
export declare const ActionBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
export declare const UNSAFE_MiniBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    variant?: BannerVariant | undefined;
} & React.RefAttributes<HTMLDivElement>>;
/**


 We use banners to contextually convey complicated or supplemental information
 to a user. Depending on the type of banner, we can provide more information
 about a feature or page the user is on, an action the user needs to perform,
 or an error the user has encountered.

 Procore banners are informative and actionable. Always explain what the user
 needs to know (and in some cases, why they’re seeing the banner), and provide
 an actionable next step.

 @since 10.19.0

 @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-banner--demo)

 @see [Design Guidelines](https://design.procore.com/banner)

 */
export declare const Banner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & BannerProps & React.RefAttributes<HTMLDivElement>> & {
    Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Props & React.RefAttributes<HTMLDivElement>>;
    ExpandableContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & BannerExpandableContentProps & React.RefAttributes<HTMLDivElement>>;
    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
    Action: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
    ExpandActionButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & BannerExpandActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
    Actions: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
    Icon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & BannerIconProps & React.RefAttributes<HTMLDivElement>>;
    Dismiss: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
};