UNPKG

6.73 kBTypeScriptView Raw
1import * as React from 'react';
2import { ViewStyle, StyleProp, TextStyle } from 'react-native';
3import { IconSource } from './Icon';
4import Surface from './Surface';
5declare type Props = React.ComponentProps<typeof Surface> & {
6 /**
7 * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.
8 * - `text` - flat button without background or outline (low emphasis)
9 * - `outlined` - button with an outline (medium emphasis)
10 * - `contained` - button with a background color and elevation shadow (high emphasis)
11 */
12 mode?: 'text' | 'outlined' | 'contained';
13 /**
14 * Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for `contained` mode.
15 */
16 dark?: boolean;
17 /**
18 * Use a compact look, useful for `text` buttons in a row.
19 */
20 compact?: boolean;
21 /**
22 * Custom text color for flat button, or background color for contained button.
23 */
24 color?: string;
25 /**
26 * Whether to show a loading indicator.
27 */
28 loading?: boolean;
29 /**
30 * Icon to display for the `Button`.
31 */
32 icon?: IconSource;
33 /**
34 * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
35 */
36 disabled?: boolean;
37 /**
38 * Label text of the button.
39 */
40 children: React.ReactNode;
41 /**
42 * Make the label text uppercased. Note that this won't work if you pass React elements as children.
43 */
44 uppercase?: boolean;
45 /**
46 * Accessibility label for the button. This is read by the screen reader when the user taps the button.
47 */
48 accessibilityLabel?: string;
49 /**
50 * Function to execute on press.
51 */
52 onPress?: () => void;
53 /**
54 * Function to execute on long press.
55 */
56 onLongPress?: () => void;
57 /**
58 * Style of button's inner content.
59 * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`.
60 */
61 contentStyle?: StyleProp<ViewStyle>;
62 style?: StyleProp<ViewStyle>;
63 /**
64 * Style for the button text.
65 */
66 labelStyle?: StyleProp<TextStyle>;
67 /**
68 * @optional
69 */
70 theme: ReactNativePaper.Theme;
71 /**
72 * testID to be used on tests.
73 */
74 testID?: string;
75};
76declare const _default: (React.ComponentClass<Pick<Props, "ref" | "style" | "children" | "pointerEvents" | "color" | "onLayout" | "onPress" | "onLongPress" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "icon" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "dark" | "labelStyle" | "disabled" | "mode" | "uppercase" | "compact" | "loading" | "contentStyle"> & {
77 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
78}, any> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<Props, any> & (({ disabled, compact, mode, dark, loading, icon, color: buttonColor, children, uppercase, accessibilityLabel, onPress, onLongPress, style, theme, contentStyle, labelStyle, testID, accessible, ...rest }: Props) => JSX.Element)) | (React.FunctionComponent<Props> & (({ disabled, compact, mode, dark, loading, icon, color: buttonColor, children, uppercase, accessibilityLabel, onPress, onLongPress, style, theme, contentStyle, labelStyle, testID, accessible, ...rest }: Props) => JSX.Element)), {}>) | (React.FunctionComponent<Pick<Props, "ref" | "style" | "children" | "pointerEvents" | "color" | "onLayout" | "onPress" | "onLongPress" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "icon" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "dark" | "labelStyle" | "disabled" | "mode" | "uppercase" | "compact" | "loading" | "contentStyle"> & {
79 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
80}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<Props, any> & (({ disabled, compact, mode, dark, loading, icon, color: buttonColor, children, uppercase, accessibilityLabel, onPress, onLongPress, style, theme, contentStyle, labelStyle, testID, accessible, ...rest }: Props) => JSX.Element)) | (React.FunctionComponent<Props> & (({ disabled, compact, mode, dark, loading, icon, color: buttonColor, children, uppercase, accessibilityLabel, onPress, onLongPress, style, theme, contentStyle, labelStyle, testID, accessible, ...rest }: Props) => JSX.Element)), {}>);
81export default _default;
82
\No newline at end of file