Skip to content
Casper UI

ButtonProps

type ButtonProps = CustomChakraBoxProps &
  LayoutProps &
  MarginProps &
  PaddingProps &
  Pick<ChakraLinkProps, "href" | "target" | "rel"> &
  Pick<ChakraButtonProps, "children" | "onClick" | "type" | "loadingText" | "form"> & {
    isDisabled?: boolean;
    isLoading?: boolean;
    leftIcon?: CasperIconComponent;
    rightIcon?: CasperIconComponent;
    size?: ConditionalValue<ButtonSize>;
    variant?: "primary" | "secondary" | "link" | "ghost" | "tertiary" | "segmentedControl" | "alert";
  };

Type Declaration

Section titled “Type Declaration”
Name Type Description
isDisabled? boolean -
isLoading? boolean -
leftIcon? CasperIconComponent Adds a icon to the left of the button text
rightIcon? CasperIconComponent Adds a icon to right of the button text
size? ConditionalValue<ButtonSize> The size of the button, default: md
variant? | "primary" | "secondary" | "link" | "ghost" | "tertiary" | "segmentedControl" | "alert" Appearance variant for Button. Note The ‘segmentedControl’ variant is only used by the SegmentedControl component.