A lot of extra props being shown despite proper interface

[kvedantmahajan]

Read the docs and I see that I've done everything right. Have a typed functional component with named export and can see somehow a lot more entries in prop table apart from normal props.

Below is my component which renders a whole lot of extra props. I mean a lot of extra hrefLang, download, draggable , lang, tabIndex and what not. I see propFilter options under Loader Options but again not sure how to use it if it all it can help in my case. Docs can be more clear.

import * as React from "react";
import styled from "styled-components";
import {
	ButtonProps,
	ButtonStyles,
	LinkStyles
} from "@turtlemint/tm-components-shared/src/components/button";

const StyledButton = styled.button<ButtonProps>`
	${ButtonStyles};
`;
const StyledLink = styled.a<ButtonProps>`
	${LinkStyles};
`;

export const Button: React.FC<ButtonProps> = ({
	btnType = "primary",
	size = "sm",
	disabled = false,
	block = false,
	icon = "",
	loading = false,
	className = "",
	prefixCls = "tm-button",
	onClick = function() {},
	href = "#",
	target = "blank",
	htmlType = "button",
	children = <></>,
	...rest
}: ButtonProps) => {
	const handleClick: React.MouseEventHandler<
		HTMLButtonElement | HTMLAnchorElement
	> = e => {
		if (btnType === "link") {
			e.preventDefault();
		}
		onClick(e);
	};
	return (
		<>
			{loading ? (
				<StyledButton
					btnType={btnType}
					size={size}
					block={block}
					disabled={disabled}
				>
					Loading...
				</StyledButton>
			) : (
				<>
					{btnType === "link" ? (
						<StyledLink
							href={href}
							target={target}
							disabled={disabled}
							{...rest}
						>
							{children}
						</StyledLink>
					) : (
						<StyledButton
							onClick={handleClick}
							btnType={btnType}
							size={size}
							block={block}
							disabled={disabled}
							type={htmlType}
							className={`${prefixCls}-${className} `}
							{...rest}
						>
							<span
								style={{
									verticalAlign: "middle",
									marginLeft: icon ? "8px" : "0px"
								}}
							>
								{children}
							</span>
						</StyledButton>
					)}
				</>
			)}
		</>
	);
};

export default Button;

Notes - Docs can also be updated for the fact that I can use different name for add("AnyName") when my component is <Button>

[beckerei]

#20 (comment)

is a good start, but it needs some more tweaks now.