@primer/react
Version:
An implementation of GitHub's Primer Design System using React
117 lines • 4.5 kB
TypeScript
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`
*/
icon?: 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;
};
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`
*/
icon?: 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;
} & 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