@synergy-design-system/vue/dist/components/SynVueIconButton.vue.d.ts

Vue3 wrappers for the Synergy Design System

import { SynBlurEvent, SynFocusEvent, SynIconButton } from '@synergy-design-system/components';
export type { SynBlurEvent } from '@synergy-design-system/components';
export type { SynFocusEvent } from '@synergy-design-system/components';
declare const _default: import('vue').DefineComponent<{
    /**
     * The name of the icon to draw.
     * Available names depend on the icon library being used.
     */
    name?: SynIconButton["name"];
    /**
     * The name of a registered custom icon library.
     */
    library?: SynIconButton["library"];
    /**
  * An external URL of an SVG file.
  * Be sure you trust the content you are including, as it will be executed as code and
  can result in XSS attacks.
   */
    src?: SynIconButton["src"];
    /**
     * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
     */
    href?: SynIconButton["href"];
    /**
     * Tells the browser where to open the link.
     * Only used when `href` is set.
     */
    target?: SynIconButton["target"];
    /**
     * Tells the browser to download the linked file as this filename.
     * Only used when `href` is set.
     */
    download?: SynIconButton["download"];
    /**
  * A description that gets read by assistive devices.
  * For optimal accessibility, you should always include a label
  that describes what the icon button does.
   */
    label?: SynIconButton["label"];
    /**
     * The icon button's size.
     */
    size?: SynIconButton["size"];
    /**
  * The color of the icon button.
  The default "currentColor" makes it possible to easily style the icon button from outside without any CSS variables.
   */
    color?: SynIconButton["color"];
    /**
     * Disables the button.
     */
    disabled?: SynIconButton["disabled"];
}, {
    nativeElement: import('vue').Ref<SynIconButton | undefined, SynIconButton | undefined>;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
    "syn-blur": (e: SynBlurEvent) => any;
    "syn-focus": (e: SynFocusEvent) => any;
}, string, import('vue').PublicProps, Readonly<{
    /**
     * The name of the icon to draw.
     * Available names depend on the icon library being used.
     */
    name?: SynIconButton["name"];
    /**
     * The name of a registered custom icon library.
     */
    library?: SynIconButton["library"];
    /**
  * An external URL of an SVG file.
  * Be sure you trust the content you are including, as it will be executed as code and
  can result in XSS attacks.
   */
    src?: SynIconButton["src"];
    /**
     * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
     */
    href?: SynIconButton["href"];
    /**
     * Tells the browser where to open the link.
     * Only used when `href` is set.
     */
    target?: SynIconButton["target"];
    /**
     * Tells the browser to download the linked file as this filename.
     * Only used when `href` is set.
     */
    download?: SynIconButton["download"];
    /**
  * A description that gets read by assistive devices.
  * For optimal accessibility, you should always include a label
  that describes what the icon button does.
   */
    label?: SynIconButton["label"];
    /**
     * The icon button's size.
     */
    size?: SynIconButton["size"];
    /**
  * The color of the icon button.
  The default "currentColor" makes it possible to easily style the icon button from outside without any CSS variables.
   */
    color?: SynIconButton["color"];
    /**
     * Disables the button.
     */
    disabled?: SynIconButton["disabled"];
}> & Readonly<{
    "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
    "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
    nativeElement: unknown;
}, any>;
export default _default;