@wikimedia/codex
Version:
Codex Design System for Wikimedia
97 lines (96 loc) • 3.37 kB
TypeScript
import { PropType } from 'vue';
import { ButtonAction, ButtonWeight, ButtonSize } from '../../types';
/**
* A control that triggers an action when the user clicks or taps on it.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* The kind of action that will be taken on click.
*
* @values 'default', 'progressive', 'destructive'
*/
action: {
type: PropType<ButtonAction>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
};
/**
* Visual prominence of Button.
*
* @values 'normal', 'primary', 'quiet'
*/
weight: {
type: PropType<ButtonWeight>;
default: string;
validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
};
/**
* Button size.
*
* Medium: Default for most cases.
* Large: Use rarely, mainly for icon-only buttons on touchscreens.
* Small: Use in tight spaces or inline with text.
* Avoid on touchscreens - prefer medium for better accessibility.
*
* @values 'small', 'medium', 'large'
*/
size: {
type: PropType<ButtonSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
};
}>, {
button: import("vue").Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
rootClasses: import("vue").ComputedRef<{
[x: string]: boolean;
'cdx-button--framed': boolean;
'cdx-button--icon-only': boolean;
'cdx-button--is-active': boolean;
}>;
onClick: (event: Event) => void;
onKeyDown: () => void;
onKeyUp: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* The kind of action that will be taken on click.
*
* @values 'default', 'progressive', 'destructive'
*/
action: {
type: PropType<ButtonAction>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
};
/**
* Visual prominence of Button.
*
* @values 'normal', 'primary', 'quiet'
*/
weight: {
type: PropType<ButtonWeight>;
default: string;
validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
};
/**
* Button size.
*
* Medium: Default for most cases.
* Large: Use rarely, mainly for icon-only buttons on touchscreens.
* Small: Use in tight spaces or inline with text.
* Avoid on touchscreens - prefer medium for better accessibility.
*
* @values 'small', 'medium', 'large'
*/
size: {
type: PropType<ButtonSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
};
}>> & Readonly<{
onClick?: ((...args: any[]) => any) | undefined;
}>, {
size: "medium" | "large" | "small";
action: "default" | "progressive" | "destructive";
weight: "normal" | "primary" | "quiet";
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;