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

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const hyperlinkStencil = createStencil({
    base: { name: "d5h42e", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);text-decoration:underline;color:var(--cnvs-sys-color-text-primary-default);cursor:pointer;border-radius:var(--cnvs-sys-shape-half);display:inline-block;padding:0 2px;margin:0 -2px;transition:color 0.15s,background-color 0.15s;&:hover, &.hover{color:var(--cnvs-sys-color-text-primary-strong);background:var(--cnvs-sys-color-bg-alt-soft);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 2px var(--cnvs-sys-color-bg-primary-default);outline:none;}&:active, &.active{color:var(--cnvs-sys-color-text-primary-stronger);background:var(--cnvs-sys-color-bg-alt-default);}" },
    modifiers: {
        variant: {
            inverse: { name: "d5h42f", styles: "color:var(--cnvs-sys-color-text-inverse);&:hover, &.hover{color:var(--cnvs-sys-color-text-inverse);background:rgba(255, 255, 255, 0.1);}&:focus, &.focus, &:focus-visible{box-shadow:0 0 0 2px var(--cnvs-sys-color-text-inverse);}&:active, &.active{color:var(--cnvs-sys-color-text-primary-stronger);background:var(--cnvs-sys-color-bg-alt-soft);}" }
        }
    }
}, "hyperlink-aaf9ad");
/**
 * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
 * on the current page.
 */
export const Hyperlink = createComponent('a')({
    displayName: 'Hyperlink',
    Component: ({ children, variant, ...elemProps }, ref, Element) => (React.createElement(Element, { ref: ref, ...handleCsProp(elemProps, hyperlinkStencil({ variant })) }, children)),
});