diff --git a/holi-bricks/components/button/Button.tsx b/holi-bricks/components/button/Button.tsx index 34e5701ee0ef496f93ef7d49168b865e5b73849f..5432b9168ff4d45bebfa3aeab57649ece16890b4 100644 --- a/holi-bricks/components/button/Button.tsx +++ b/holi-bricks/components/button/Button.tsx @@ -37,6 +37,8 @@ export type ButtonProps = AccessibilityProps & { transparent?: boolean selected?: boolean icon?: HoliIconType + iconBefore?: HoliIconType + scaleIcon?: number inline?: boolean testID?: string } @@ -52,6 +54,8 @@ export const Button = ({ transparent = false, selected = false, icon, + iconBefore, + scaleIcon = 1, inline = false, testID, ...rest @@ -67,6 +71,7 @@ export const Button = ({ const isSpinning = loading || isProcessing const labelToShow = isSpinning && loadingLabel ? loadingLabel : label + const iconSize = 16 * scaleIcon const handlePress = useCallback( async (event: GestureResponderEvent) => { @@ -103,6 +108,9 @@ export const Button = ({ {...accessibilityProps(rest)} > <View style={styles.content}> + {iconBefore && !isSpinning && ( + <HoliIcon icon={iconBefore} size={iconSize} color={styles.text(disabled, selected, variant).color} /> + )} <View style={styles.textContainer(size)}> <Text size={size === 'lg' ? 'md' : 'sm'} colorOveride={styles.text(disabled, selected, variant).color}> {labelToShow} @@ -111,12 +119,12 @@ export const Button = ({ {isSpinning && ( <View testID="spinner"> <SpinningIconContainer spinning={isSpinning}> - <HoliIcon icon={Loader} size={16} color={styles.text(disabled, selected, variant).color} /> + <HoliIcon icon={Loader} size={iconSize} color={styles.text(disabled, selected, variant).color} /> </SpinningIconContainer> </View> )} {!isSpinning && icon && ( - <HoliIcon icon={icon} size={16} color={styles.text(disabled, selected, variant).color} /> + <HoliIcon icon={icon} size={iconSize} color={styles.text(disabled, selected, variant).color} /> )} </View> </Pressable>