@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
128 lines • 6.81 kB
TypeScript
import { TertiaryButtonProps } from './TertiaryButton';
export interface ToolbarIconButtonProps extends Omit<TertiaryButtonProps, 'size' | 'variant'> {
onToggleChange?: (toggled: boolean | undefined) => void;
toggled?: boolean;
shouldMirrorIcon?: boolean;
shouldMirrorIconInRTL?: boolean;
}
export declare const toolbarIconButtonStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
size: {
large: {
fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
height: "var(--cnvs-sys-size-lg, 3rem)";
paddingInline: "var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem))";
minWidth: "var(--cnvs-base-size-1300, 6.5rem)";
};
medium: {
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))";
height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
gap: "var(--cnvs-base-size-75, 0.375rem)";
minWidth: "var(--cnvs-base-size-1100, 5.5rem)";
};
small: {
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem))";
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
minWidth: "var(--cnvs-base-size-900, 4.5rem)";
};
extraSmall: {
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
paddingInline: "var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem))";
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
minWidth: string;
};
};
grow: {
true: {
width: string;
maxWidth: string;
};
};
iconPosition: {
only: {
padding: number;
};
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: {
fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
height: "var(--cnvs-sys-size-lg, 3rem)";
paddingInline: "var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem))";
minWidth: "var(--cnvs-base-size-1300, 6.5rem)";
};
medium: {
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))";
height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
gap: "var(--cnvs-base-size-75, 0.375rem)";
minWidth: "var(--cnvs-base-size-1100, 5.5rem)";
};
small: {
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem))";
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
minWidth: "var(--cnvs-base-size-900, 4.5rem)";
};
extraSmall: {
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
paddingInline: "var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem))";
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
minWidth: string;
};
};
grow: {
true: {
width: string;
maxWidth: string;
};
};
iconPosition: {
only: {
padding: number;
};
start: {};
end: {};
};
}, {}, {
background: string;
border: string;
boxShadowInner: string;
boxShadowOuter: string;
label: string;
opacity: string;
borderRadius: string;
}, never, never>, never>;
export declare const ToolbarIconButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ToolbarIconButtonProps>;
//# sourceMappingURL=ToolbarIconButton.d.ts.map