@workday/canvas-kit-react/dist/es6/button/lib/ExternalHyperlink.d.ts

The parent module that contains all Workday Canvas Kit React components

import { HyperlinkProps } from './Hyperlink';
export interface ExternalHyperlinkProps extends HyperlinkProps {
    /**
     * Informs a screen reader user the link will open in a new window. It is read after the link text.
     * This value will need to be translated.
     */
    iconLabel?: string;
}
export declare const externalHyperlinkStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
    readonly externalHyperlinkIcon: "external-hyperlink-icon";
}, {}, import("@workday/canvas-kit-styling").Stencil<{
    variant: {
        inverse: {
            color: "--cnvs-sys-color-fg-inverse";
            '&:hover, &.hover': {
                color: "--cnvs-sys-color-fg-inverse";
                background: string;
            };
            '&:focus, &.focus, &:focus-visible': {
                boxShadow: string;
            };
            '&:active, &.active': {
                color: "--cnvs-sys-color-fg-link-hover";
                background: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
            };
        };
        secondary: {
            color: "--cnvs-sys-color-fg-default";
            '&:hover, &.hover': {
                color: "--cnvs-sys-color-fg-strong";
                background: "var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05))";
            };
            '&:active, &.active': {
                color: "--cnvs-sys-color-fg-strong";
                background: "var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09))";
            };
        };
    };
    linkType: {
        inline: {};
        standalone: {
            textDecoration: string;
        };
    };
}, {}, {}, never, never>>, {
    readonly externalHyperlinkIcon: "external-hyperlink-icon";
}, {}, import("@workday/canvas-kit-styling").Stencil<{
    variant: {
        inverse: {
            color: "--cnvs-sys-color-fg-inverse";
            '&:hover, &.hover': {
                color: "--cnvs-sys-color-fg-inverse";
                background: string;
            };
            '&:focus, &.focus, &:focus-visible': {
                boxShadow: string;
            };
            '&:active, &.active': {
                color: "--cnvs-sys-color-fg-link-hover";
                background: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
            };
        };
        secondary: {
            color: "--cnvs-sys-color-fg-default";
            '&:hover, &.hover': {
                color: "--cnvs-sys-color-fg-strong";
                background: "var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05))";
            };
            '&:active, &.active': {
                color: "--cnvs-sys-color-fg-strong";
                background: "var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09))";
            };
        };
    };
    linkType: {
        inline: {};
        standalone: {
            textDecoration: string;
        };
    };
}, {}, {}, never, never>, never>;
/**
 * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
 * link on a dark background such as `system.color.accent.info`.
 */
export declare const ExternalHyperlink: import("@workday/canvas-kit-react/common").ElementComponent<"a", ExternalHyperlinkProps>;
//# sourceMappingURL=ExternalHyperlink.d.ts.map