import type { IconComponent } from '~/components/Icon/types'; import type { TextLinkProps } from '~/components/TextLink/types'; import type { Action } from '~/types/actions'; export declare const Variant: { readonly Critical: "critical"; readonly Info: "info"; readonly Success: "success"; readonly Warning: "warning"; readonly Inverted: "inverted"; }; export type Variant = (typeof Variant)[keyof typeof Variant]; export interface BannerProps { /** * The action a user needs to take, represented by a button in the right/bottom of the banner. * If undefined, no action button is shown. */ action?: Omit; /** * The secondary action a user needs to take, represented by a button to the left of the action button. */ secondaryAction?: Action; /** * Where to align action Buttons in Banner, always at aligned bottom on mobile. */ alignAction?: 'right' | 'bottom'; /** * Banner message, automatically wrapped with a ``. Should be 1-2 sentences and may contain links (`TextLink`). */ children: React.ReactNode; /** * Tag for testing. */ 'data-tag'?: string; /** * HTML id attribute for outer banner node. */ id?: string; /** * For banners placed within a section of the page. * Styles banners with rounded corners and no shadow. * Group multiple inline banners inside a `Stack` (with `wrap={false}`) * @deprecated use `placement="inline"` instead */ inline?: boolean; /** * Called when the user clicks on the close button. * If undefined, no close button is shown. */ onClose?: () => void; /** * Determines the banner icon and colors. `Critical`, `Info`, `Success`, and `Warning` */ variant: Variant; /** * The icon to to display on the left side of `Banner` */ icon?: IconComponent; /** * Render a loading spinner to the left side of `Banner` */ loading?: boolean; /** * Type of `Banner` to render */ placement: 'inline-small' | 'inline-large' | 'global'; /** * HeadingText to render above banner text. */ header?: React.ReactNode; /** * TextLink to render below banner text. */ inlineLink?: Omit & { label: React.ReactNode; }; }