maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
136 lines (135 loc) • 4.21 kB
TypeScript
import type { Color, Icon, Size } from './types';
export type { Color, Size };
export interface Props {
/**
* The variant of the button - Change UI of component (link or button style)
* @values `'button' | 'link'`
* @deprecated Use the component <MazLink /> instead
*/
variant?: 'button' | 'link';
/**
* The size of the button
* @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`
*/
size?: Size;
/**
* The color of the button
* @values `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'black' | 'transparent' | 'theme'`
*/
color?: Color;
/**
* The type of the button
* @values `'submit' | 'reset' | 'button'`
*/
type?: 'submit' | 'reset' | 'button';
/**
* If true, the button will have a full border radius
* @default false
*/
rounded?: boolean;
/**
* Size of the rounded
* @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`
* @default 'lg'
*/
roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
/**
* If true, the button will have no border radius
* @default false
*/
noRounded?: boolean;
/**
* If true, the button have the "border" style
* @default false
*/
outline?: boolean;
/**
* If true, the button will have a pastel color
* @default false
*/
pastel?: boolean;
/**
* If true, the button will have a full width
* @default false
*/
block?: boolean;
/**
* If true, the button will have no underline on hover (useful with `variant="link"`)
* @default false
*/
noUnderline?: boolean;
/**
* Enable the button loader
* @default false
*/
loading?: boolean;
/**
* Disable the button
* @default false
*/
disabled?: boolean;
/**
* If true, the button will have a fab style
* @default false
*/
fab?: boolean;
/**
* The name of the icon to display or component, only with fab
* `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`
*/
icon?: string | Icon;
/**
* The name of the icon or component to display on the left of the button
* `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`
*/
leftIcon?: string | Icon;
/**
* The name of the icon or component to display on the right of the button
* `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`
*/
rightIcon?: string | Icon;
/**
* If true, the button will have no padding
* @default false
*/
noPadding?: boolean;
/**
* If true, the button will have no box-shadow
* @default false
*/
noElevation?: boolean;
/**
* Choose how the elements are aligned in the button
*/
justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
}
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: {
"left-icon"?(_: {}): any;
icon?(_: {}): any;
default?(_: {}): any;
"right-icon"?(_: {}): any;
};
refs: {};
rootEl: any;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
size: Size;
color: Color;
type: "submit" | "reset" | "button";
variant: "button" | "link";
roundedSize: "none" | "sm" | "md" | "lg" | "xl" | "full";
icon: string | Icon;
leftIcon: string | Icon;
rightIcon: string | Icon;
justify: "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly";
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};