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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { buttonColorPropVars, buttonStencil } from './BaseButton';
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, cssVar } from '@workday/canvas-kit-styling';
import { brand, system } from '@workday/canvas-tokens-web';
import { Button } from './Button';
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
const secondaryButtonStencil = createStencil({
    extends: buttonStencil,
    base: { name: "3yp002", styles: "box-sizing:border-box;--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-default);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-round);--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--icon-a1b49d, currentColor);&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-stronger);--boxShadowInner-button-85bf0e:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-85bf0e:var(--cnvs-brand-common-focus-outline);--color-system-icon-3a4847:var(--icon-553b51, currentColor);}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-stronger);--border-button-85bf0e:var(--cnvs-sys-color-border-input-strong);--color-system-icon-3a4847:var(--icon-846e8f, currentColor);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-stronger);--border-button-85bf0e:var(--cnvs-sys-color-border-input-strong);--color-system-icon-3a4847:var(--icon-3abb65, currentColor);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-stronger);--opacity-button-85bf0e:var(--cnvs-sys-opacity-disabled);--color-system-icon-3a4847:var(--icon-74b26e, currentColor);}" },
    modifiers: {
        variant: {
            inverse: { name: "186lbb", styles: "--background-button-85bf0e:transparent;--border-button-85bf0e:var(--cnvs-sys-color-border-inverse);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);--color-system-icon-3a4847:var(--icon-a1b49d, currentColor);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-strong);--border-button-85bf0e:var(--cnvs-sys-color-border-inverse);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);--color-system-icon-3a4847:var(--icon-846e8f, currentColor);}&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-translucent);--border-button-85bf0e:transparent;--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);--boxShadowInner-button-85bf0e:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-85bf0e:var(--cnvs-sys-color-border-inverse);--color-system-icon-3a4847:var(--icon-553b51, currentColor);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-stronger);--border-button-85bf0e:var(--cnvs-sys-color-border-inverse);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);--color-system-icon-3a4847:var(--icon-3abb65, currentColor);}&:disabled, &.disabled{--background-button-85bf0e:transparent;--border-button-85bf0e:var(--cnvs-sys-color-border-inverse);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);--color-system-icon-3a4847:var(--icon-74b26e, currentColor);}" }
        }
    }
}, "secondary-button-d64ed8");
export const SecondaryButton = createComponent('button')({
    displayName: 'SecondaryButton',
    Component: ({ children, variant, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
        return (_jsx(Button, { as: Element, ref: ref, iconPosition: iconPosition, size: size, grow: grow, cs: [secondaryButtonStencil({ variant, iconPosition, grow, size }), cs], ...elemProps, children: children }));
    },
});