@workday/canvas-kit-preview-react/dist/commonjs/pill/lib/PillIconButton.d.ts

Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.

import { SystemIconProps } from '@workday/canvas-kit-react/icon';
export interface PillIconButtonProps extends Partial<SystemIconProps> {
    /**
     * The aria label for the removable icon. You must provide a valid string to represent the action.
     */
    'aria-label'?: string;
}
export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
    size: {
        large: {
            fontWeight: "--cnvs-sys-font-weight-bold";
            height: string;
            paddingInline: "--cnvs-sys-space-x8";
            minWidth: string;
            fontFamily: "--cnvs-sys-font-family-default";
            lineHeight: "--cnvs-sys-line-height-body-small";
            fontSize: "--cnvs-sys-font-size-body-small";
            letterSpacing: "--cnvs-base-letter-spacing-200";
        };
        medium: {
            fontWeight: "--cnvs-sys-font-weight-bold";
            minWidth: string;
            paddingInline: "--cnvs-sys-space-x6";
            height: "--cnvs-sys-space-x10";
            fontFamily: "--cnvs-sys-font-family-default";
            lineHeight: "--cnvs-sys-line-height-subtext-large";
            fontSize: "--cnvs-sys-font-size-subtext-large";
            letterSpacing: "--cnvs-base-letter-spacing-150";
        };
        small: {
            fontWeight: "--cnvs-sys-font-weight-bold";
            height: "--cnvs-sys-space-x8";
            minWidth: "--cnvs-sys-space-x20";
            paddingInline: "--cnvs-sys-space-x4";
            gap: "--cnvs-sys-space-x1";
            fontFamily: "--cnvs-sys-font-family-default";
            lineHeight: "--cnvs-sys-line-height-subtext-large";
            fontSize: "--cnvs-sys-font-size-subtext-large";
            letterSpacing: "--cnvs-base-letter-spacing-150";
        };
        extraSmall: {
            fontWeight: "--cnvs-sys-font-weight-bold";
            height: "--cnvs-sys-space-x6";
            minWidth: string;
            paddingInline: "--cnvs-sys-space-x3";
            gap: "--cnvs-sys-space-x1";
            fontFamily: "--cnvs-sys-font-family-default";
            lineHeight: "--cnvs-sys-line-height-subtext-medium";
            fontSize: "--cnvs-sys-font-size-subtext-medium";
            letterSpacing: "--cnvs-base-letter-spacing-100";
        };
    };
    grow: {
        true: {
            width: string;
            maxWidth: string;
        };
    };
    iconPosition: {
        only: {
            padding: "--cnvs-sys-space-zero";
        };
        start: {};
        end: {};
    };
}, {}, {
    background: string;
    border: string;
    boxShadowInner: string;
    boxShadowOuter: string;
    label: string;
    opacity: string;
    borderRadius: string;
}, never, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
    size: {
        large: {
            fontWeight: "--cnvs-sys-font-weight-bold";
            height: string;
            paddingInline: "--cnvs-sys-space-x8";
            minWidth: string;
            fontFamily: "--cnvs-sys-font-family-default";
            lineHeight: "--cnvs-sys-line-height-body-small";
            fontSize: "--cnvs-sys-font-size-body-small";
            letterSpacing: "--cnvs-base-letter-spacing-200";
        };
        medium: {
            fontWeight: "--cnvs-sys-font-weight-bold";
            minWidth: string;
            paddingInline: "--cnvs-sys-space-x6";
            height: "--cnvs-sys-space-x10";
            fontFamily: "--cnvs-sys-font-family-default";
            lineHeight: "--cnvs-sys-line-height-subtext-large";
            fontSize: "--cnvs-sys-font-size-subtext-large";
            letterSpacing: "--cnvs-base-letter-spacing-150";
        };
        small: {
            fontWeight: "--cnvs-sys-font-weight-bold";
            height: "--cnvs-sys-space-x8";
            minWidth: "--cnvs-sys-space-x20";
            paddingInline: "--cnvs-sys-space-x4";
            gap: "--cnvs-sys-space-x1";
            fontFamily: "--cnvs-sys-font-family-default";
            lineHeight: "--cnvs-sys-line-height-subtext-large";
            fontSize: "--cnvs-sys-font-size-subtext-large";
            letterSpacing: "--cnvs-base-letter-spacing-150";
        };
        extraSmall: {
            fontWeight: "--cnvs-sys-font-weight-bold";
            height: "--cnvs-sys-space-x6";
            minWidth: string;
            paddingInline: "--cnvs-sys-space-x3";
            gap: "--cnvs-sys-space-x1";
            fontFamily: "--cnvs-sys-font-family-default";
            lineHeight: "--cnvs-sys-line-height-subtext-medium";
            fontSize: "--cnvs-sys-font-size-subtext-medium";
            letterSpacing: "--cnvs-base-letter-spacing-100";
        };
    };
    grow: {
        true: {
            width: string;
            maxWidth: string;
        };
    };
    iconPosition: {
        only: {
            padding: "--cnvs-sys-space-zero";
        };
        start: {};
        end: {};
    };
}, {}, {
    background: string;
    border: string;
    boxShadowInner: string;
    boxShadowOuter: string;
    label: string;
    opacity: string;
    borderRadius: string;
}, never, never>, never>;
export declare const PillIconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillIconButtonProps, {
    state: {
        id: string;
        disabled: boolean;
    };
    events: {};
}>;
//# sourceMappingURL=PillIconButton.d.ts.map