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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { extLinkIcon } from '@workday/canvas-system-icons-web';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { hyperlinkStencil } from './Hyperlink';
import { calc, createStencil, px2rem, handleCsProp } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
export const externalHyperlinkStencil = createStencil({
    extends: hyperlinkStencil,
    base: { name: "1c6bd6", styles: "box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;& [data-part=\"external-hyperlink-icon\"]{--color-system-icon-99ce3e:currentColor;--size-svg-728c60:1em;width:calc(1em - 0.0625rem);min-width:calc(var(--cnvs-sys-space-x4) - 0.0625rem);margin-inline-start:calc(var(--cnvs-sys-space-x1) - 0.125rem);& > svg{min-width:var(--cnvs-sys-space-x4);min-height:var(--cnvs-sys-space-x4);}}" }
}, "external-hyperlink-170667");
/**
 * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
 * link on a dark or colorful background such as `blueberry400`.
 */
export const ExternalHyperlink = createComponent('a')({
    displayName: 'ExternalHyperlink',
    Component: ({ children, iconLabel, variant, ...elemProps }, ref, Element) => (_jsxs(Element, { ref: ref, target: "_blank", rel: "noreferrer", ...handleCsProp(elemProps, externalHyperlinkStencil({ variant })), children: [_jsx("span", { "data-part": "external-hyperlink-children", children: children }), _jsx(SystemIcon, { icon: extLinkIcon, role: "img", "aria-label": iconLabel, "data-part": "external-hyperlink-icon" })] })),
});