1 | import * as React from "react";
|
2 | import { PseudoBoxProps } from "../PseudoBox";
|
3 | import { Icons } from "../theme/icons";
|
4 | import { Omit } from "../common-types";
|
5 |
|
6 | export interface IButton {
|
7 | /**
|
8 | * The size of the button
|
9 | */
|
10 | size?: "xs" | "sm" | "md" | "lg";
|
11 | /**
|
12 | * If `true`, the button will show a spinner.
|
13 | */
|
14 | isLoading?: boolean;
|
15 | /**
|
16 | * The color scheme of the button.
|
17 | *
|
18 | * 🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).
|
19 | * @see http://chakra-ui.com/theme#colors
|
20 | */
|
21 | variantColor?: string;
|
22 | /**
|
23 | * The variant of the button style to use.
|
24 | */
|
25 | variant?: "outline" | "ghost" | "unstyled" | "link" | "solid";
|
26 | /**
|
27 | * If `true`, the button will be styled in it's active state.
|
28 | */
|
29 | isActive?: boolean;
|
30 | /**
|
31 | * If `true`, the button will be disabled.
|
32 | */
|
33 | isDisabled?: boolean;
|
34 | /**
|
35 | * The label to show in the button when `isLoading` is true
|
36 | * If no text is passed, it only shows the spinner
|
37 | */
|
38 | loadingText?: string;
|
39 | /**
|
40 | * If `true`, the button will take up the full width of its container.
|
41 | */
|
42 | isFullWidth?: boolean;
|
43 | /**
|
44 | * The html button type to use.
|
45 | */
|
46 | type?: "button" | "reset" | "submit";
|
47 | /**
|
48 | * The content of the button.
|
49 | */
|
50 | children: React.ReactNode;
|
51 | /**
|
52 | * If added, the button will show an icon before the button's label.
|
53 | * Use the icon key in `theme.iconPath`
|
54 | */
|
55 | leftIcon?: Icons | React.ComponentType;
|
56 | /**
|
57 | * If added, the button will show an icon after the button's label.
|
58 | * Use the icon key in `theme.iconPath`
|
59 | */
|
60 | rightIcon?: Icons | React.ComponentType;
|
61 | /**
|
62 | * The space between the button icon and label.
|
63 | * Use the styled-system tokens or add custom values as a string
|
64 | */
|
65 | iconSpacing?: PseudoBoxProps["margin"];
|
66 | }
|
67 |
|
68 | export type ButtonProps = IButton & Omit<PseudoBoxProps, "size">;
|
69 |
|
70 | declare const Button: React.FC<ButtonProps>;
|
71 |
|
72 | export default Button;
|