diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index 0ae3afbf98b..8ca56da524b 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -8,6 +8,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import getButtonState from '@libs/getButtonState'; import CONST from '@src/CONST'; import type IconAsset from '@src/types/utils/IconAsset'; +import Button from './Button'; import Hoverable from './Hoverable'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; @@ -46,6 +47,12 @@ type BannerProps = { /** Styles to be assigned to the Banner text */ textStyles?: StyleProp; + + /** Whether to display button in the banner */ + shouldShowButton?: boolean; + + /** Callback called when pressing the button */ + onButtonPress?: () => void; }; function Banner({ @@ -54,11 +61,13 @@ function Banner({ icon = Expensicons.Exclamation, onClose, onPress, + onButtonPress, containerStyles, textStyles, shouldRenderHTML = false, shouldShowIcon = false, shouldShowCloseButton = false, + shouldShowButton = false, }: BannerProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -68,7 +77,7 @@ function Banner({ return ( {(isHovered) => { - const isClickable = onClose ?? onPress; + const isClickable = onClose && onPress; const shouldHighlight = isClickable && isHovered; return ( ))} + {shouldShowButton && ( +