@masaischool/lotus
Version:
Masai UI component library designed to work seamlessly with Chakra UI
199 lines (198 loc) • 5.14 kB
TypeScript
export declare type ButtonVariants = 'primary' | 'secondary' | 'secondary-grey' | 'tertiary' | 'tertiary-grey' | 'link';
declare const Button: {
baseStyle: {
fontWeight: string;
fontStyle: string;
textTransform: string;
fontFamily: string;
borderRadius: string;
};
sizes: {
sm: {
h: string;
p: string;
fontSize: string;
lineHeight: string;
letterSpacing: string;
};
md: {
h: string;
p: string;
fontSize: string;
lineHeight: string;
letterSpacing: string;
};
lg: {
h: string;
p: string;
fontSize: string;
lineHeight: string;
};
'block-sm': {
w: string;
h: string;
p: string;
fontSize: string;
lineHeight: string;
letterSpacing: string;
};
'block-md': {
w: string;
h: string;
p: string;
fontSize: string;
lineHeight: string;
letterSpacing: string;
};
'block-lg': {
w: string;
h: string;
p: string;
fontSize: string;
lineHeight: string;
};
};
variants: {
primary: {
bg: string;
color: string;
_hover: {
bg: string;
_disabled: {
bg: string;
};
};
_focus: {
outline: string;
outlineColor: string;
boxShadow: string;
outlineOffset: string;
};
_disabled: {
bg: string;
};
};
secondary: {
bg: string;
color: string;
_hover: {
bg: string;
_disabled: {
bg: string;
};
};
_focus: {
outline: string;
boxShadow: string;
outlineOffset: string;
};
_disabled: {
bg: string;
color: string;
};
};
'secondary-grey': {
border: string;
borderColor: string;
bg: string;
color: string;
_hover: {
bg: string;
color: string;
_disabled: {
color: string;
};
};
_focus: {
boxShadow: string;
};
_disabled: {
bg: string;
color: string;
};
};
tertiary: {
bg: string;
color: string;
_hover: {
bg: string;
};
_focus: {
outline: string;
outlineColor: string;
border: string;
bg: string;
boxShadow: string;
outlineOffset: string;
};
_disabled: {
bg: string;
color: string;
};
};
'tertiary-grey': {
bg: string;
color: string;
_hover: {
bg: string;
};
_focus: {
outline: string;
outlineColor: string;
border: string;
bg: string;
boxShadow: string;
outlineOffset: string;
};
_disabled: {
bg: string;
color: string;
};
};
link: {
bg: string;
color: string;
_hover: {
color: string;
_disabled: {
color: string;
};
};
_focus: {
outline: string;
boxShadow: string;
};
_disabled: {
color: string;
};
};
'social-media': {
border: string;
borderColor: string;
bg: string;
color: string;
_hover: {
bg: string;
borderColor: string;
_disabled: {
color: string;
};
};
_focus: {
bg: string;
outline: string;
outlineColor: string;
boxShadow: string;
outlineOffset: string;
};
_disabled: {
color: string;
};
};
};
defaultProps: {
size: string;
variant: string;
};
};
export default Button;