@metamask/design-system-react-native
Version:
1 lines • 4.13 kB
Source Map (JSON)
{"version":3,"file":"ButtonBase.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { PressableProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { ButtonBaseSize } from '../../types';\nimport type { IconProps, IconName } from '../Icon';\nimport type { SpinnerProps } from '../temp-components/Spinner';\nimport type { TextProps } from '../Text';\n\n/**\n * ButtonBase component props.\n */\nexport type ButtonBaseProps = {\n /**\n * Required prop for the content to be rendered within the ButtonBase\n */\n children: React.ReactNode | string;\n /**\n * Optional props to be passed to the Text component when children is a string\n */\n textProps?: Omit<Partial<TextProps>, 'children'>;\n /**\n * Optional prop to control the size of the ButtonBase\n * Possible values: ButtonBaseSize.Sm (32px), ButtonBaseSize.Md (40px), ButtonBaseSize.Lg (48px)\n *\n * @default ButtonBaseSize.Lg\n */\n size?: ButtonBaseSize;\n /**\n * Optional prop that when true, shows a loading spinner\n *\n * @default false\n */\n isLoading?: boolean;\n /**\n * Optional prop for text to display when button is in loading state\n */\n loadingText?: string;\n /**\n * Optional prop to pass additional properties to the end icon\n */\n spinnerProps?: Partial<SpinnerProps>;\n /**\n * Optional prop to specify an icon to show at the start of the button\n */\n startIconName?: IconName;\n /**\n * Optional prop to pass additional properties to the start icon\n */\n startIconProps?: Partial<IconProps>;\n /**\n * Optional prop for a custom element to show at the start of the button\n */\n startAccessory?: React.ReactNode;\n /**\n * Optional prop to specify an icon to show at the end of the button\n */\n endIconName?: IconName;\n /**\n * Optional prop to pass additional properties to the end icon\n */\n endIconProps?: Partial<IconProps>;\n /**\n * Optional prop for a custom element to show at the end of the button\n */\n endAccessory?: React.ReactNode;\n /**\n * Optional prop that when true, disables the button\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Optional prop that when true, makes the button take up the full width of its container\n *\n * @default false\n */\n isFullWidth?: boolean;\n /**\n * Optional prop to add twrnc overriding classNames.\n * Can be a string or a function that receives pressed state and returns a string.\n */\n twClassName?: string | ((pressed: boolean) => string);\n /**\n * Optional prop to control text className based on pressed state.\n */\n textClassName?: (pressed: boolean) => string;\n /**\n * Optional prop to control icon className based on pressed state.\n */\n iconClassName?: (pressed: boolean) => string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp<ViewStyle>;\n /**\n * Optional accessibility label to describe the button for screen readers.\n * If not provided, the button content will be used as the label.\n */\n accessibilityLabel?: string;\n /**\n * Optional accessibility hint to provide additional context about the button's action.\n * Should describe what happens when the button is pressed.\n */\n accessibilityHint?: string;\n /**\n * Optional accessibility role. Defaults to 'button'.\n * Can be overridden for specific use cases.\n */\n accessibilityRole?: 'button' | 'link' | 'menuitem' | 'tab' | 'none';\n /**\n * Optional accessibility actions for custom interactions.\n * Use sparingly and only when default button behavior is insufficient.\n */\n accessibilityActions?: {\n name: string;\n label?: string;\n }[];\n /**\n * Optional callback for handling accessibility action events.\n */\n onAccessibilityAction?: (event: {\n nativeEvent: { actionName: string };\n }) => void;\n} & Omit<\n PressableProps,\n | 'accessibilityRole'\n | 'accessibilityLabel'\n | 'accessibilityHint'\n | 'accessibilityActions'\n | 'onAccessibilityAction'\n>;\n"]}