@aotearoan/neon

import { NeonButtonSize } from '@/common/enums/NeonButtonSize'; import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor'; import { NeonButtonStyle } from '@/common/enums/NeonButtonStyle'; import { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition'; import { NeonState } from '@/common/enums/NeonState'; /** * A button component. Renders an HTML button or, if an href is provided, renders using NeonLink in the style of a button. NeonButton supports all events and attributes of HTML buttons, e.g, @click. */ declare const _default: import("vue").DefineComponent<{ /** * Optional href for rendering a button as a link */ href: { type: StringConstructor; default: null; }; /** * The text to display on a button */ label: { type: StringConstructor; default: null; }; /** * The button size */ size: { type: () => NeonButtonSize; default: NeonButtonSize; }; /** * The button color */ color: { type: () => NeonFunctionalColor; default: NeonFunctionalColor; }; /** * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background. * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported) */ inverse: { type: BooleanConstructor; default: boolean; }; /** * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'. */ alternateColor: { type: () => NeonFunctionalColor; default: null; }; /** * Optional icon to display */ icon: { type: StringConstructor; default: null; }; /** * Position of the icon if combined with text */ iconPosition: { type: () => NeonHorizontalPosition; default: NeonHorizontalPosition; }; /** * The style of button */ buttonStyle: { type: () => NeonButtonStyle; default: NeonButtonStyle; }; /** * Provide button states of ready, loading, success or error which change the display of the button (with icons) to reflect the state. */ state: { type: () => NeonState; default: NeonState; }; /** * Whether the button is disabled */ disabled: { type: BooleanConstructor; default: boolean; }; /** * For text buttons, do not display the background. This is useful for icon buttons in headers. */ transparent: { type: BooleanConstructor; default: boolean; }; /** * Whether to display a button outline when the button has focus */ outline: { type: BooleanConstructor; default: boolean; }; /** * Make the button circular. NOTE: This is only for icon only buttons. */ circular: { type: BooleanConstructor; default: null; }; /** * Make a button extend to the full width of the parent container. */ fullWidth: { type: BooleanConstructor; default: null; }; /** * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons) * @ignore */ indicator: { type: BooleanConstructor; default: boolean; }; /** * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as open or closed. * @ignore */ indicatorExpanded: { type: BooleanConstructor; default: null; }; }, { iconName: import("vue").ComputedRef<string>; classes: import("vue").ComputedRef<(string | false | { [x: string]: boolean | "" | NeonFunctionalColor; 'neon-button--text-transparent': boolean; 'neon-button--disabled': boolean; 'neon-button--inverse': boolean; 'neon-button--circular': boolean; 'neon-button--no-outline': boolean; 'neon-button--full-width': boolean; 'neon-button--with-icon neon-button--icon-only': boolean | ""; 'neon-button--with-icon neon-button--icon-left': boolean | ""; 'neon-button--with-icon neon-button--icon-right': boolean | ""; })[]>; button: import("vue").Ref<HTMLElement | null>; attrs: { [x: string]: unknown; }; sanitizedAttributes: import("vue").ComputedRef<{ [x: string]: unknown; }>; clickLink: () => void | undefined; clickButton: () => void; }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{ /** * Optional href for rendering a button as a link */ href: { type: StringConstructor; default: null; }; /** * The text to display on a button */ label: { type: StringConstructor; default: null; }; /** * The button size */ size: { type: () => NeonButtonSize; default: NeonButtonSize; }; /** * The button color */ color: { type: () => NeonFunctionalColor; default: NeonFunctionalColor; }; /** * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background. * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported) */ inverse: { type: BooleanConstructor; default: boolean; }; /** * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'. */ alternateColor: { type: () => NeonFunctionalColor; default: null; }; /** * Optional icon to display */ icon: { type: StringConstructor; default: null; }; /** * Position of the icon if combined with text */ iconPosition: { type: () => NeonHorizontalPosition; default: NeonHorizontalPosition; }; /** * The style of button */ buttonStyle: { type: () => NeonButtonStyle; default: NeonButtonStyle; }; /** * Provide button states of ready, loading, success or error which change the display of the button (with icons) to reflect the state. */ state: { type: () => NeonState; default: NeonState; }; /** * Whether the button is disabled */ disabled: { type: BooleanConstructor; default: boolean; }; /** * For text buttons, do not display the background. This is useful for icon buttons in headers. */ transparent: { type: BooleanConstructor; default: boolean; }; /** * Whether to display a button outline when the button has focus */ outline: { type: BooleanConstructor; default: boolean; }; /** * Make the button circular. NOTE: This is only for icon only buttons. */ circular: { type: BooleanConstructor; default: null; }; /** * Make a button extend to the full width of the parent container. */ fullWidth: { type: BooleanConstructor; default: null; }; /** * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons) * @ignore */ indicator: { type: BooleanConstructor; default: boolean; }; /** * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as open or closed. * @ignore */ indicatorExpanded: { type: BooleanConstructor; default: null; }; }>> & { onClick?: ((...args: any[]) => any) | undefined; }, { outline: boolean; disabled: boolean; label: string; href: string; icon: string; size: NeonButtonSize; color: NeonFunctionalColor; inverse: boolean; circular: boolean; alternateColor: NeonFunctionalColor; iconPosition: NeonHorizontalPosition; buttonStyle: NeonButtonStyle; state: NeonState; transparent: boolean; fullWidth: boolean; indicator: boolean; indicatorExpanded: boolean; }, {}>; export default _default;