@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
84 lines (83 loc) • 3.89 kB
TypeScript
import { RouteLocationRaw } from 'vue-router';
/**
* OcButton - A versatile button component with various styling options and types.
*
* @prop {'button' | 'a' | 'router-link'} [type='button'] - The HTML element used for the button.
* @prop {boolean} [disabled=false] - Whether the button is disabled.
* @prop {'small' | 'medium' | 'large'} [size='medium'] - The size of the button.
* @prop {string} [href=null] - When type is 'a', specifies the URL to link to.
* @prop {'_blank' | '_self' | '_parent' | '_top'} [target=null] - When type is 'a', specifies where to open the linked document.
* @prop {RouteLocationRaw} [to=null] - When type is 'router-link', specifies the target route.
* @prop {string} [ariaLabel=null] - An accessible label for the button. Use only when needed to override the visible text.
* @prop {'button' | 'submit' | 'reset'} [submit='button'] - The type attribute when rendering a button element.
* @prop {'passive' | 'primary' | 'danger' | 'success' | 'warning' | 'brand'} [variation='passive'] - The color variation of the button.
* @prop {'outline' | 'filled' | 'raw' | 'raw-inverse'} [appearance='outline'] - The visual style of the button.
* - outline: transparent with colored border
* - filled: colored background with contrasting text
* - raw: text-only button with colored text
* - raw-inverse: text-only button with contrasting text
* @prop {'left' | 'center' | 'right' | 'space-around' | 'space-between' | 'space-evenly'} [justifyContent='center'] - How to align content within the button.
* @prop {'none' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'} [gapSize='medium'] - Spacing between child elements.
* @prop {boolean} [showSpinner=false] - Whether to show a loading spinner.
*
* @slot default - Content of the button.
*
* @event {MouseEvent} click - Emitted when the button is clicked.
*
* @example
* ```vue
* <!-- Basic button -->
* <oc-button>Click me</oc-button>
*
* <!-- Primary filled button -->
* <oc-button variation="primary" appearance="filled">Submit</oc-button>
*
* <!-- Button with icon -->
* <oc-button>
* <oc-icon name="home" />
* Home
* </oc-button>
*
* <!-- Link button -->
* <oc-button type="a" href="https://example.com" target="_blank">External Link</oc-button>
*
* <!-- Button with loading state -->
* <oc-button :show-spinner="isLoading" @click="handleClick">Save</oc-button>
* ```
*/
interface Props {
type?: 'button' | 'a' | 'router-link';
disabled?: boolean;
size?: 'small' | 'medium' | 'large';
href?: string;
target?: '_blank' | '_self' | '_parent' | '_top';
to?: RouteLocationRaw;
ariaLabel?: string;
submit?: 'button' | 'submit' | 'reset';
variation?: 'passive' | 'primary' | 'danger' | 'success' | 'warning' | 'brand' | string;
appearance?: 'outline' | 'filled' | 'raw' | 'raw-inverse' | string;
justifyContent?: 'left' | 'center' | 'right' | 'space-around' | 'space-between' | 'space-evenly';
gapSize?: 'none' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
showSpinner?: boolean;
}
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: {
default?(_: {}): 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, {} & {
click: (event: MouseEvent) => any;
}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
onClick?: (event: MouseEvent) => any;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};