@greensight/gds
Version:
Greensight Design System
38 lines (37 loc) • 1.72 kB
TypeScript
import React, { ElementType, Ref } from 'react';
import { EnumLike } from '../../../helpers/emotion/theming';
import type { ButtonProps, ButtonTheme } from './types';
/**
* Button component.
*
* Renders <button /> or <a /> (pass `href`) or any custom element (pass `as`).
*
* Usage with themes:
* @example
* enum Variants {
* primary = 'primary',
* }
* enum Sizes {
* sm = 'sm',
* }
* const Button = createButtonWithTheme<typeof Variants, typeof Sizes>();
* const Test = () => (
* <Button
* as="a"
* href="#"
* variant="primary"
* theme={{
* button: {},
* icon: {},
* }}
* >
* Content
* </Button>
*);
*/
export declare const BaseButton: <V extends EnumLike, S extends EnumLike, Typography, T extends ElementType = "button">({ children, block, size, theme, variant, Icon, iconAfter, hidden, type, as, external, disabled, rounded, css, typography, wrap, getTypographyCSS, ...props }: ButtonProps<V, S, Typography, T>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
/**
* Proxy component setting initial values for theme, variant, and size for button in the used project.
*/
export declare const createButtonWithTheme: <V extends EnumLike, S extends EnumLike, Typography>(defaultTheme: ButtonTheme<V, S, Typography>, defaultVariant: V | keyof V, defaultSize: S | keyof S, getTypographyCSS: ButtonProps<V, S, Typography>["getTypographyCSS"]) => <T extends React.ElementType<any> = "button">(props: ButtonProps<V, S, Typography, T>, ref: Ref<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export type { ButtonProps, ButtonBaseProps, ButtonState, ButtonTheme } from './types';