@funkit/connect
Version:
Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.
45 lines (44 loc) • 2.21 kB
TypeScript
import React from 'react';
import { type BoxProps } from '../Box/Box';
type BackgroundColorType = Extract<BoxProps['background'], string>;
type BorderColorType = Extract<BoxProps['borderColor'], string>;
type FunIconButtonVariant = 'filled' | 'quiet' | 'outlined';
interface FunIconButtonCustomColors {
baseBackground?: BackgroundColorType;
disabledBackground?: BackgroundColorType;
hoverBackground?: BackgroundColorType;
activeBackground?: BackgroundColorType;
baseBorder?: BorderColorType;
hoverBorder?: BorderColorType;
focusedBorder?: BorderColorType;
}
export interface FunIconButtonProps extends Pick<BoxProps, 'as' | 'borderRadius' | 'color' | 'fontSize' | 'fontWeight' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave' | 'style'> {
onClick?: () => void;
/** Icon element to be rendered */
icon: React.ReactNode;
/** Adjust the visual center of the {@link icon} wrapper component, eg. icons that are visually weighted off-center can be pushed by a pixel to one direction to make them look centered */
iconVisualWeightCenter?: 'left' | 'top' | 'right' | 'bottom';
/** Total height and width of the clickable area (including borders) */
size?: BoxProps['height'];
/** Overrides width if the button is not round */
width?: BoxProps['width'];
/** Defaults to 0 - prefer using {@link size} for simple round buttons */
paddingX?: BoxProps['paddingX'];
/** Defaults to 0 - prefer using {@link size} for simple round buttons */
paddingY?: BoxProps['paddingY'];
/** Defaults to 8px */
gap?: BoxProps['gap'];
ariaLabel?: string;
renderAsSquare?: boolean;
/** Disables onClick but also disables focus via tabbing */
isDisabled?: boolean;
children?: React.ReactNode;
/** Defaults to 'quiet' */
variant?: FunIconButtonVariant;
isHighlighted?: boolean;
colorOverrides?: FunIconButtonCustomColors;
href?: string;
testId?: string;
}
export declare const FunIconButton: ({ children, onClick, icon, iconVisualWeightCenter, size, width, gap, ariaLabel, color, as, isDisabled, borderRadius, style, variant, colorOverrides, testId, ...props }: FunIconButtonProps) => React.JSX.Element;
export {};