@primer/react/dist/Banner/Banner.d.ts

An implementation of GitHub's Primer Design System using React

import React from 'react';
import { type ButtonProps } from '../Button';
import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
export type BannerVariant = 'critical' | 'info' | 'success' | 'upsell' | 'warning';
export type BannerProps = React.ComponentPropsWithoutRef<'section'> & {
    /**
     * Provide an optional label to override the default name for the Banner
     * landmark region
     */
    'aria-label'?: string;
    /**
     * Provide an optional className to add to the outermost element rendered by
     * the Banner
     */
    className?: string;
    /**
     * Provide an optional description for the Banner. This should provide
     * supplemental information about the Banner
     */
    description?: React.ReactNode;
    /**
     * Specify whether the title of the Banner should be visible or not.
     */
    hideTitle?: boolean;
    /**
     * Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell`
     * @deprecated Use `leadingVisual` instead
     */
    icon?: React.ReactNode;
    /**
     * Provide a custom leading visual for the Banner. This is only available when `variant` is `info` or `upsell`
     */
    leadingVisual?: React.ReactNode;
    /**
     * Optionally provide a handler to be called when the banner is dismissed.
     * Providing this prop will show a dismiss button.
     */
    onDismiss?: () => void;
    /**
     * Provide an optional primary action for the Banner.
     */
    primaryAction?: React.ReactNode;
    /**
     * Provide an optional secondary action for the Banner
     */
    secondaryAction?: React.ReactNode;
    /**
     * The title for the Banner. This will be used as the accessible name and is
     * required unless `Banner.Title` is used as a child.
     */
    title?: React.ReactNode;
    /**
     * Specify the type of the Banner
     */
    variant?: BannerVariant;
    /**
     * Specify the layout of the Banner. Compact layout will reduce the padding.
     */
    layout?: 'default' | 'compact';
    /**
     * Override the default actions layout behavior
     */
    actionsLayout?: 'inline' | 'stacked' | 'default';
    /**
     * Full width banner specifically for use within confined spaces, such as dialogs, tables, cards, or boxes where available space is limited.
     */
    flush?: boolean;
};
export declare const Banner: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
    /**
     * Provide an optional label to override the default name for the Banner
     * landmark region
     */
    'aria-label'?: string;
    /**
     * Provide an optional className to add to the outermost element rendered by
     * the Banner
     */
    className?: string;
    /**
     * Provide an optional description for the Banner. This should provide
     * supplemental information about the Banner
     */
    description?: React.ReactNode;
    /**
     * Specify whether the title of the Banner should be visible or not.
     */
    hideTitle?: boolean;
    /**
     * Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell`
     * @deprecated Use `leadingVisual` instead
     */
    icon?: React.ReactNode;
    /**
     * Provide a custom leading visual for the Banner. This is only available when `variant` is `info` or `upsell`
     */
    leadingVisual?: React.ReactNode;
    /**
     * Optionally provide a handler to be called when the banner is dismissed.
     * Providing this prop will show a dismiss button.
     */
    onDismiss?: () => void;
    /**
     * Provide an optional primary action for the Banner.
     */
    primaryAction?: React.ReactNode;
    /**
     * Provide an optional secondary action for the Banner
     */
    secondaryAction?: React.ReactNode;
    /**
     * The title for the Banner. This will be used as the accessible name and is
     * required unless `Banner.Title` is used as a child.
     */
    title?: React.ReactNode;
    /**
     * Specify the type of the Banner
     */
    variant?: BannerVariant;
    /**
     * Specify the layout of the Banner. Compact layout will reduce the padding.
     */
    layout?: "default" | "compact";
    /**
     * Override the default actions layout behavior
     */
    actionsLayout?: "inline" | "stacked" | "default";
    /**
     * Full width banner specifically for use within confined spaces, such as dialogs, tables, cards, or boxes where available space is limited.
     */
    flush?: boolean;
} & React.RefAttributes<HTMLElement>>;
type HeadingElement = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
export type BannerTitleProps<As extends HeadingElement> = {
    as?: As;
    className?: string;
} & React.ComponentPropsWithoutRef<As extends 'h2' ? 'h2' : As>;
export declare function BannerTitle<As extends HeadingElement>(props: BannerTitleProps<As>): React.JSX.Element;
export type BannerDescriptionProps = React.ComponentPropsWithoutRef<'div'>;
export declare function BannerDescription({ children, className, ...rest }: BannerDescriptionProps): React.JSX.Element;
export type BannerActionsProps = {
    primaryAction?: React.ReactNode;
    secondaryAction?: React.ReactNode;
};
export declare function BannerActions({ primaryAction, secondaryAction }: BannerActionsProps): React.JSX.Element;
export type BannerPrimaryActionProps = Omit<ButtonProps, 'variant'>;
declare const BannerPrimaryAction: PolymorphicForwardRefComponent<"button", BannerPrimaryActionProps>;
export type BannerSecondaryActionProps = Omit<ButtonProps, 'variant'>;
declare const BannerSecondaryAction: PolymorphicForwardRefComponent<"button", BannerSecondaryActionProps>;
export { BannerPrimaryAction, BannerSecondaryAction };
//# sourceMappingURL=Banner.d.ts.map