@primer/react-brand/lib/EyebrowBanner/EyebrowBanner.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React, { PropsWithChildren } from 'react';
import { type Icon as IconProps } from '@primer/octicons-react';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner.css';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes.css';
export type EyebrowBannerProps = BaseProps<HTMLAnchorElement> & {
    href: string;
    ['data-testid']?: string;
} & React.HTMLAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
type EyebrowBannerHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>;
type EyebrowBannerSubHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>;
export declare const EyebrowBannerIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
export declare const defaultEyebrowBannerIconColor: "default";
type EyebrowBannerVisual = BaseProps<HTMLSpanElement> & {
    icon?: React.ReactNode | IconProps;
    color?: (typeof EyebrowBannerIconColors)[number];
    hasBackground?: boolean;
    ['aria-hidden']?: boolean;
    children?: React.ReactNode;
};
declare const EyebrowBannerVisual: React.ForwardRefExoticComponent<Omit<EyebrowBannerVisual, "ref"> & React.RefAttributes<HTMLSpanElement>>;
export declare const EyebrowBannerLabelColors: readonly ["blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange", "default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
type EyebrowBannerLabel = BaseProps<HTMLSpanElement> & {
    /**
     * The color variations available in EyebrowBanner.Label
     */
    color?: (typeof EyebrowBannerLabelColors)[number];
};
declare const EyebrowBannerLabel: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<EyebrowBannerLabel>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
/**
 * Use EyebrowBanner to display a short message at the top of a page.
 * @see https://primer.style/brand/components/EyebrowBanner
 */
export declare const EyebrowBanner: React.ForwardRefExoticComponent<Omit<EyebrowBannerProps, "ref"> & React.RefAttributes<HTMLAnchorElement>> & {
    Visual: React.ForwardRefExoticComponent<Omit<EyebrowBannerVisual, "ref"> & React.RefAttributes<HTMLSpanElement>>;
    Label: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<EyebrowBannerLabel>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
    Heading: React.ForwardRefExoticComponent<Omit<EyebrowBannerHeadingProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
    SubHeading: React.ForwardRefExoticComponent<Omit<EyebrowBannerSubHeadingProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
    testIds: {
        root: string;
        visual: string;
        label: string;
        expandableArrow: string;
    };
};
export {};