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

An implementation of GitHub's Primer Design System using React

import { ButtonProps } from "../Button/types.js";
import React from "react";

//#region src/Banner/Banner.d.ts
type BannerVariant = 'critical' | 'info' | 'success' | 'upsell' | 'warning';
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;
};
type HeadingElement = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
type BannerTitleProps<As extends HeadingElement> = {
  as?: As;
  className?: string;
} & React.ComponentPropsWithoutRef<As extends 'h2' ? 'h2' : As>;
declare function BannerTitle<As extends HeadingElement>(props: BannerTitleProps<As>): React.JSX.Element;
type BannerDescriptionProps = React.ComponentPropsWithoutRef<'div'>;
declare function BannerDescription({
  children,
  className,
  ...rest
}: BannerDescriptionProps): React.JSX.Element;
type BannerPrimaryActionProps = Omit<ButtonProps, 'variant'>;
type BannerSecondaryActionProps = Omit<ButtonProps, 'variant'>;
//#endregion
export { BannerDescription, BannerDescriptionProps, BannerPrimaryActionProps, BannerProps, BannerSecondaryActionProps, BannerTitle, BannerTitleProps, BannerVariant };