UNPKG

1.96 kBTypeScriptView Raw
1import * as React from "react";
2import { PseudoBoxProps } from "../PseudoBox";
3import { Icons } from "../theme/icons";
4import { Omit } from "../common-types";
5
6export 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
68export type ButtonProps = IButton & Omit<PseudoBoxProps, "size">;
69
70declare const Button: React.FC<ButtonProps>;
71
72export default Button;