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

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { CSProps } from '@workday/canvas-kit-styling';
export interface HyperlinkProps extends CSProps {
    /**
     * Sets color styles for Hyperlink
     * - `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes. Use this
     *   variant on dark backgrounds.
     * - `secondary`: sets the color to a dark gray (keeps the underline by default). Use this
     *   variant on colored backgrounds.
     */
    variant?: 'inverse' | 'secondary';
    /**
     * Sets underline behavior for Hyperlink
     * - `inline` (default): keeps the underline. Use when the hyperlink appears in body text.
     * - `standalone`: removes the underline. Use when a hyperlink is outside paragraph or body text.
     *
     * @default 'inline'
     */
    linkType?: 'inline' | 'standalone';
    /**
     * Attribute for the hyperlink URL
     */
    href?: string;
    children?: React.ReactNode;
}
export declare const hyperlinkStencil: 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>;
/**
 * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
 * on the current page.
 */
export declare const Hyperlink: import("@workday/canvas-kit-react/common").ElementComponent<"a", HyperlinkProps>;
//# sourceMappingURL=Hyperlink.d.ts.map