maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
111 lines (110 loc) • 3.53 kB
TypeScript
import { IconComponent } from '@maz-ui/icons';
import { MazColor, MazSize } from './types';
export interface MazBtnProps {
/**
* The text of the button, if not provided, the slot will be used
* @default undefined
*/
text?: string;
/**
* Predifined sizes of the button
* @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`
*/
size?: MazSize;
/**
* The color of the button
* @values `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'destructive' | 'transparent' | 'contrast' | 'accent' | 'background'`
*/
color?: MazColor | 'background';
/**
* The type of the button
* @values `'submit' | 'reset' | 'button'`
*/
type?: 'submit' | 'reset' | 'button';
/**
* Size of the rounded
* @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'base'`
* @default 'base'
*/
roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'base';
/**
* If true, the button have the "border" style
* @default false
*/
outlined?: 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;
/**
* 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 | IconComponent;
/**
* The name of the icon or component to display on the left of the button
* `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`
*/
leftIcon?: string | IconComponent;
/**
* The name of the icon or component to display on the right of the button
* `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`
*/
rightIcon?: string | IconComponent;
/**
* If true, the button will have no padding
* @default true
*/
padding?: boolean;
/**
* Choose how the elements are aligned in the button
*/
justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
/**
* If true, the button will have an active state
* @default false
*/
active?: boolean;
}
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: {
'left-icon'?(_: {}): any;
icon?(_: {}): any;
default?(_: {}): any;
'right-icon'?(_: {}): any;
loader?(_: {}): any;
};
refs: {};
rootEl: any;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<MazBtnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MazBtnProps> & Readonly<{}>, {}, {}, {}, {}, 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;
};
};