| 1 | import * as React from 'react';
|
| 2 | import { AccessibilityRole, Animated, ColorValue, GestureResponderEvent, PressableAndroidRippleConfig, StyleProp, TextStyle, View, ViewStyle } from 'react-native';
|
| 3 | import type { $Omit, ThemeProp } from '../../types';
|
| 4 | import { IconSource } from '../Icon';
|
| 5 | import Surface from '../Surface';
|
| 6 | export declare type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
|
| 7 | /**
|
| 8 | * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.
|
| 9 | * - `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options.
|
| 10 | * - `outlined` - button with an outline without background, typically used for important, but not primary action – represents medium emphasis.
|
| 11 | * - `contained` - button with a background color, used for important action, have the most visual impact and high emphasis.
|
| 12 | * - `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background. @supported Available in v5.x with theme version 3
|
| 13 | * - `contained-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons. @supported Available in v5.x with theme version 3
|
| 14 | */
|
| 15 | mode?: 'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal';
|
| 16 | /**
|
| 17 | * Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for:
|
| 18 | * * `contained` mode for theme version 2
|
| 19 | * * `contained`, `contained-tonal` and `elevated` modes for theme version 3.
|
| 20 | */
|
| 21 | dark?: boolean;
|
| 22 | /**
|
| 23 | * Use a compact look, useful for `text` buttons in a row.
|
| 24 | */
|
| 25 | compact?: boolean;
|
| 26 | /**
|
| 27 | * @deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead.
|
| 28 | * Custom text color for flat button, or background color for contained button.
|
| 29 | */
|
| 30 | color?: string;
|
| 31 | /**
|
| 32 | * Custom button's background color.
|
| 33 | */
|
| 34 | buttonColor?: string;
|
| 35 | /**
|
| 36 | * Custom button's text color.
|
| 37 | */
|
| 38 | textColor?: string;
|
| 39 | /**
|
| 40 | * Color of the ripple effect.
|
| 41 | */
|
| 42 | rippleColor?: ColorValue;
|
| 43 | /**
|
| 44 | * Whether to show a loading indicator.
|
| 45 | */
|
| 46 | loading?: boolean;
|
| 47 | /**
|
| 48 | * Icon to display for the `Button`.
|
| 49 | */
|
| 50 | icon?: IconSource;
|
| 51 | /**
|
| 52 | * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
|
| 53 | */
|
| 54 | disabled?: boolean;
|
| 55 | /**
|
| 56 | * Label text of the button.
|
| 57 | */
|
| 58 | children: React.ReactNode;
|
| 59 | /**
|
| 60 | * Make the label text uppercased. Note that this won't work if you pass React elements as children.
|
| 61 | */
|
| 62 | uppercase?: boolean;
|
| 63 | /**
|
| 64 | * Type of background drawabale to display the feedback (Android).
|
| 65 | * https://reactnative.dev/docs/pressable#rippleconfig
|
| 66 | */
|
| 67 | background?: PressableAndroidRippleConfig;
|
| 68 | /**
|
| 69 | * Accessibility label for the button. This is read by the screen reader when the user taps the button.
|
| 70 | */
|
| 71 | accessibilityLabel?: string;
|
| 72 | /**
|
| 73 | * Accessibility hint for the button. This is read by the screen reader when the user taps the button.
|
| 74 | */
|
| 75 | accessibilityHint?: string;
|
| 76 | /**
|
| 77 | * Accessibility role for the button. The "button" role is set by default.
|
| 78 | */
|
| 79 | accessibilityRole?: AccessibilityRole;
|
| 80 | /**
|
| 81 | * Function to execute on press.
|
| 82 | */
|
| 83 | onPress?: (e: GestureResponderEvent) => void;
|
| 84 | /**
|
| 85 | * Function to execute as soon as the touchable element is pressed and invoked even before onPress.
|
| 86 | */
|
| 87 | onPressIn?: (e: GestureResponderEvent) => void;
|
| 88 | /**
|
| 89 | * Function to execute as soon as the touch is released even before onPress.
|
| 90 | */
|
| 91 | onPressOut?: (e: GestureResponderEvent) => void;
|
| 92 | /**
|
| 93 | * Function to execute on long press.
|
| 94 | */
|
| 95 | onLongPress?: (e: GestureResponderEvent) => void;
|
| 96 | /**
|
| 97 | * The number of milliseconds a user must touch the element before executing `onLongPress`.
|
| 98 | */
|
| 99 | delayLongPress?: number;
|
| 100 | /**
|
| 101 | * Style of button's inner content.
|
| 102 | * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`.
|
| 103 | */
|
| 104 | contentStyle?: StyleProp<ViewStyle>;
|
| 105 | /**
|
| 106 | * Specifies the largest possible scale a text font can reach.
|
| 107 | */
|
| 108 | maxFontSizeMultiplier?: number;
|
| 109 | style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
| 110 | /**
|
| 111 | * Style for the button text.
|
| 112 | */
|
| 113 | labelStyle?: StyleProp<TextStyle>;
|
| 114 | /**
|
| 115 | * @optional
|
| 116 | */
|
| 117 | theme?: ThemeProp;
|
| 118 | /**
|
| 119 | * testID to be used on tests.
|
| 120 | */
|
| 121 | testID?: string;
|
| 122 | };
|
| 123 | declare const _default: import("../../utils/forwardRef").ForwardRefComponent<View, Props>;
|
| 124 | export default _default;
|
| 125 | //# sourceMappingURL=Button.d.ts.map |
| \ | No newline at end of file |