import { type MouseEvent, type PropsWithChildren, type ReactElement } from "react"; import { type To } from "react-router"; type NativeButtonProps = React.DetailedHTMLProps, HTMLButtonElement>; export interface ButtonBaseProps extends PropsWithChildren { /** * See aria roles: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles */ role?: NativeButtonProps["role"]; title?: string; form?: NativeButtonProps["form"]; variant?: "primary" | "tertiary" | "link" | "subscription" | "secondary" | "quaternary"; size?: "tiny" | "small" | "medium" | "large" | "huge"; icon?: ReactElement; noPadding?: boolean; inline?: boolean; /** * Wenn `true`, wird der Text in Kleinbuchstaben angezeigt. * @default false */ lowercase?: boolean; /** * Legt das Schriftgewicht des Buttons fest. * @default "normal" */ fontWeight?: "normal" | "bold" | "light" | "medium"; /** * If `true`, shows a dot indicating that there is something new. * * Refs: https://setproduct.com/blog/badge-ui-design */ badge?: boolean; } export interface ButtonButtonProps extends ButtonBaseProps { component?: "button" | undefined; onClick?: (event: MouseEvent) => void; /** Mandatory because the default type is "submit", which is not ideal. */ type: NativeButtonProps["type"]; disabled?: boolean; } export interface LinkButtonProps extends ButtonBaseProps { component: "link"; disabled?: boolean; to: To; /** * Also available on the link, so we can implement a share button that links to a URL and can trigger a share functionality. * @remarks If you want to use this, really think it through. Maybe you want to use a `component="button"` instead. */ onClick?: () => void; } export type ButtonProps = ButtonButtonProps | LinkButtonProps; declare const _default: import("react").NamedExoticComponent; export default _default;