@spark-web/button
Version:
--- title: Button storybookPath: forms-buttons-button--default isExperimentalPackage: true ---
89 lines (88 loc) • 4.24 kB
TypeScript
import type { ButtonProminence, ButtonSize, ButtonTone } from './types';
/**
* useButtonStyles
*
* Custom hook for styling buttons and certain links.
* Returns a tuple where the first item is an object of props to spread onto the
* underlying `Box` component, and the second item is a CSS object that can be
* passed to Emotion's `css` function.
*/
export declare function useButtonStyles({ iconOnly, prominence, size, tone, }: UseButtonStylesProps): readonly [{
readonly alignItems: "center";
readonly background: "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
readonly border: import("@spark-web/theme").ResponsiveProp<"standard" | "fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | "positiveMuted" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive" | "standardInverted" | "field" | "fieldHover" | "fieldDisabled"> | undefined;
readonly borderWidth: import("@spark-web/theme").ResponsiveProp<"standard" | "large"> | undefined;
readonly borderRadius: "small" | "medium";
readonly cursor: "pointer";
readonly display: "inline-flex";
readonly gap: "small";
readonly height: "large" | "medium";
readonly justifyContent: "center";
readonly paddingX: "medium" | "xlarge" | undefined;
readonly position: "relative";
readonly width: "large" | "medium" | undefined;
}, {
readonly '&:not([aria-disabled=true])': {
readonly ':hover': {
readonly borderColor: string | undefined;
readonly backgroundColor: string | undefined;
readonly '> *': {
readonly color: string | undefined;
readonly stroke: string | undefined;
readonly transitionProperty: string;
readonly transitionTimingFunction: string;
readonly transitionDuration: string;
};
};
readonly ':active': {
readonly borderColor: string | undefined;
readonly backgroundColor: string | undefined;
readonly transform: "scale(0.98)";
readonly '> *': {
readonly color: string | undefined;
readonly stroke: string | undefined;
readonly transitionProperty: string;
readonly transitionTimingFunction: string;
readonly transitionDuration: string;
};
};
readonly ':focus': {
boxShadow: string;
outline: string;
outlineOffset: string;
} | {
outline: string;
outlineOffset: string;
};
};
readonly '&[aria-disabled=true]': {
readonly backgroundColor: string | undefined;
readonly borderColor: string | undefined;
readonly cursor: "default";
readonly '*': {
readonly color: string | undefined;
readonly stroke: string | undefined;
};
readonly ':focus': {
boxShadow: string;
outline: string;
outlineOffset: string;
} | {
outline: string;
outlineOffset: string;
};
};
readonly transitionProperty: string;
readonly transitionTimingFunction: string;
readonly transitionDuration: string;
}];
export declare type UseButtonStylesProps = {
/** Whether the children of the button is a single icon or not. */
iconOnly: boolean;
/** Sets the visual prominence of the button. */
prominence: ButtonProminence;
/** Sets the size of the button. */
size: ButtonSize;
/** Sets the tone of the button. */
tone: ButtonTone;
};