@aotearoan/neon/dist/src/components/user-input/button/NeonButton.d.ts

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { NeonButtonSize } from '@/model/user-input/button/NeonButtonSize';
import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';
import { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';
import { NeonHorizontalPosition } from '@/model/common/position/NeonHorizontalPosition';
import { NeonState } from '@/model/common/state/NeonState';
import { NeonButtonType } from '@/model/user-input/button/NeonButtonType';
/**
 * 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<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;
    };
    /**
     * The aria label of the icon button
     */
    iconAriaLabel: {
        type: StringConstructor;
    };
    /**
     * Position of the icon if combined with text
     */
    iconPosition: {
        type: () => NeonHorizontalPosition;
        default: NeonHorizontalPosition;
    };
    /**
     * The style of button
     */
    buttonStyle: {
        type: () => NeonButtonStyle;
        default: NeonButtonStyle;
    };
    /**
     * The type of button, see <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button">button</a>.
     */
    buttonType: {
        type: () => NeonButtonType;
        default: NeonButtonType;
    };
    /**
     * Provide button states of <em>ready, loading, success or error</em> 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 <em>open</em> or <em>closed</em>.
     * @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, HTMLElement | null>;
    attrs: {
        [x: string]: unknown;
    };
    sanitizedAttributes: import("vue").ComputedRef<{
        [x: string]: unknown;
    }>;
    clickLink: () => void | undefined;
    clickButton: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, 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;
    };
    /**
     * The aria label of the icon button
     */
    iconAriaLabel: {
        type: StringConstructor;
    };
    /**
     * Position of the icon if combined with text
     */
    iconPosition: {
        type: () => NeonHorizontalPosition;
        default: NeonHorizontalPosition;
    };
    /**
     * The style of button
     */
    buttonStyle: {
        type: () => NeonButtonStyle;
        default: NeonButtonStyle;
    };
    /**
     * The type of button, see <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button">button</a>.
     */
    buttonType: {
        type: () => NeonButtonType;
        default: NeonButtonType;
    };
    /**
     * Provide button states of <em>ready, loading, success or error</em> 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 <em>open</em> or <em>closed</em>.
     * @ignore
     */
    indicatorExpanded: {
        type: BooleanConstructor;
        default: null;
    };
}>> & Readonly<{
    onClick?: ((...args: any[]) => any) | undefined;
}>, {
    color: NeonFunctionalColor;
    icon: string;
    label: string;
    inverse: boolean;
    disabled: boolean;
    href: string;
    size: NeonButtonSize;
    alternateColor: NeonFunctionalColor;
    outline: boolean;
    iconPosition: NeonHorizontalPosition;
    buttonStyle: NeonButtonStyle;
    buttonType: NeonButtonType;
    state: NeonState;
    transparent: boolean;
    circular: boolean;
    fullWidth: boolean;
    indicator: boolean;
    indicatorExpanded: boolean;
}, {}, {
    NeonExpansionIndicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        expanded: {
            type: BooleanConstructor;
            default: boolean;
        };
        inverse: {
            type: BooleanConstructor;
            default: boolean;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
        color: {
            type: () => NeonFunctionalColor;
            default: null;
        };
    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        expanded: {
            type: BooleanConstructor;
            default: boolean;
        };
        inverse: {
            type: BooleanConstructor;
            default: boolean;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
        color: {
            type: () => NeonFunctionalColor;
            default: null;
        };
    }>> & Readonly<{}>, {
        color: NeonFunctionalColor;
        inverse: boolean;
        disabled: boolean;
        expanded: boolean;
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        name: {
            type: StringConstructor;
            required: true;
        };
        id: {
            type: StringConstructor;
            default: null;
        };
        color: {
            type: () => NeonFunctionalColor;
            default: null;
        };
        inverse: {
            type: BooleanConstructor;
            default: boolean;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        sanitizedAttributes: import("vue").ComputedRef<{
            [x: string]: unknown;
        }>;
        icon: import("vue").ComputedRef<string | undefined>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        name: {
            type: StringConstructor;
            required: true;
        };
        id: {
            type: StringConstructor;
            default: null;
        };
        color: {
            type: () => NeonFunctionalColor;
            default: null;
        };
        inverse: {
            type: BooleanConstructor;
            default: boolean;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & Readonly<{}>, {
        color: NeonFunctionalColor;
        id: string;
        inverse: boolean;
        disabled: boolean;
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    NeonLink: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        href: {
            type: StringConstructor;
            default: null;
        };
        noStyle: {
            type: BooleanConstructor;
            default: boolean;
        };
        outlineStyle: {
            type: () => import("../../../neon").NeonOutlineStyle;
            default: import("../../../neon").NeonOutlineStyle; /**
             * Optional href for rendering a button as a link
             */
        }; /**
         * Optional href for rendering a button as a link
         */
        externalIndicator: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
        routerUrl: import("vue").ComputedRef<string | undefined>;
        sanitizedAttributes: import("vue").ComputedRef<{
            [x: string]: unknown;
        }>;
        activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
        exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
        onClick: () => void;
        onSpace: () => Promise<void>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        href: {
            type: StringConstructor;
            default: null;
        };
        noStyle: {
            type: BooleanConstructor;
            default: boolean;
        };
        outlineStyle: {
            type: () => import("../../../neon").NeonOutlineStyle;
            default: import("../../../neon").NeonOutlineStyle; /**
             * Optional href for rendering a button as a link
             */
        }; /**
         * Optional href for rendering a button as a link
         */
        externalIndicator: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & Readonly<{
        onClick?: ((...args: any[]) => any) | undefined;
    }>, {
        href: string;
        noStyle: boolean;
        outlineStyle: import("../../../neon").NeonOutlineStyle;
        externalIndicator: boolean;
    }, {}, {
        NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
            name: {
                type: StringConstructor;
                required: true;
            };
            id: {
                type: StringConstructor;
                default: null;
            };
            color: {
                type: () => NeonFunctionalColor;
                default: null;
            };
            inverse: {
                type: BooleanConstructor;
                default: boolean;
            };
            disabled: {
                type: BooleanConstructor;
                default: boolean;
            };
        }>, {
            sanitizedAttributes: import("vue").ComputedRef<{
                [x: string]: unknown;
            }>;
            icon: import("vue").ComputedRef<string | undefined>;
        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
            name: {
                type: StringConstructor;
                required: true;
            };
            id: {
                type: StringConstructor;
                default: null;
            };
            color: {
                type: () => NeonFunctionalColor;
                default: null;
            };
            inverse: {
                type: BooleanConstructor;
                default: boolean;
            };
            disabled: {
                type: BooleanConstructor;
                default: boolean;
            };
        }>> & Readonly<{}>, {
            color: NeonFunctionalColor;
            id: string;
            inverse: boolean;
            disabled: boolean;
        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;