src/components/Buttons/Button.d.ts
import * as React from 'react'
import { RadiumStyles, ElementAttributes } from '../..'
import { WithThemeInjectedProps, ApplyWithTheme } from '../../styles/themer/withTheme'
export interface ButtonProps extends WithThemeInjectedProps {
children?: React.ReactNode
/** Whether or not the button is disabled. */
disabled?: boolean
/** Size of the button. */
size?: 'tiny' | 'small' | 'standard' | 'large'
/** Snacks button variants. */
snacksStyle?: 'primary' | 'secondary' | 'flat' | 'coupon'
/** Optional style overrides. */
style?: RadiumStyles
/** An optional icon. Can be a an icon name or a Snacks `Icon` component. */
icon?: string | React.ReactElement<any> // eslint-disable-line @typescript-eslint/no-explicit-any
/** Where the icon is positioned relative to primary text content. */
iconPosition?: 'left' | 'right'
/** Reverses colors. Use for rendering buttons on dark backgrounds. */
inverted?: boolean
/**
* If href is provided, `Button` will render as an anchor
* tag with the supplied href value.
*/
href?: string
}
type ButtonElementProps<C extends React.ElementType> = Pick<
React.ComponentPropsWithRef<C>,
'onClick' | 'onMouseDown' | 'type' | 'tabIndex'
> & {
elementAttributes?: ElementAttributes<React.ComponentPropsWithoutRef<C>>
}
type ButtonBase<C extends React.ElementType, P = {}> = ApplyWithTheme<
(props: P & ButtonProps & ButtonElementProps<C>) => JSX.Element
>
type Button = ButtonBase<'a', { href: string }> & ButtonBase<'button'>
declare const Button: Button
export default Button