@metamask/design-system-react
Version:
Design system react ui components
1 lines • 4.33 kB
Source Map (JSON)
{"version":3,"file":"ButtonBase.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { ButtonBaseSize } from '../../types';\nimport type { IconName, IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type ButtonBaseProps = ComponentProps<'button'> & {\n /**\n * Required prop for the content to be rendered within the ButtonBase\n */\n children: React.ReactNode;\n /**\n * Optional prop for additional CSS classes to be applied to the ButtonBase component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional prop to control the size of the ButtonBase\n *\n * @default ButtonBaseSize.Lg\n */\n size?: ButtonBaseSize;\n /**\n * Optional props to be passed to the Text component when children is a string\n */\n textProps?: Partial<TextProps>;\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 boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a button element\n *\n * @default false\n */\n asChild?: boolean;\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 props to be passed to the loading Text component\n */\n loadingTextProps?: Partial<TextProps>;\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 to pass additional properties to the loading icon\n */\n loadingIconProps?: Partial<IconProps>;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n\n // Accessibility props\n /**\n * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.\n * This will be used as the aria-label attribute.\n */\n 'aria-label'?: string;\n /**\n * Optional ID of an element that labels the button.\n * This will be used as the aria-labelledby attribute.\n */\n 'aria-labelledby'?: string;\n /**\n * Optional ID of an element that describes the button.\n * This will be used as the aria-describedby attribute.\n */\n 'aria-describedby'?: string;\n /**\n * Optional prop to indicate if the button is pressed (for toggle buttons).\n * This will be used as the aria-pressed attribute.\n */\n 'aria-pressed'?: boolean | 'mixed';\n /**\n * Optional prop to indicate if the button controls a collapsible element.\n * This will be used as the aria-expanded attribute.\n */\n 'aria-expanded'?: boolean;\n /**\n * Optional prop to indicate if the button controls another element.\n * This will be used as the aria-controls attribute.\n */\n 'aria-controls'?: string;\n /**\n * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).\n * This will be used as the aria-haspopup attribute.\n */\n 'aria-haspopup'?:\n | boolean\n | 'false'\n | 'true'\n | 'menu'\n | 'listbox'\n | 'tree'\n | 'grid'\n | 'dialog';\n};\n"]}