@wix/design-system
Version:
@wix/design-system
62 lines • 1.85 kB
TypeScript
import { ReactNode } from 'react';
import { ButtonWithAsProp } from '../Button';
import { TooltipCommonProps } from '../common';
export type ToggleButtonProps = ButtonWithAsProp<{
/**
* Specifies a CSS class name to be appended to the component’s root element.
* @internal
*/
className?: string;
/** Used for passing any @wix/design-system icon. For external icon make sure to follow ux sizing guidelines. */
children?: ReactNode;
/** Button skins.
* @default 'standard'
*/
skin?: ToggleButtonSkin;
/** Button size.
* @default 'medium'
*/
size?: 'tiny' | 'small' | 'medium' | 'large';
/** Applies selected styles. */
selected?: boolean;
/**
* Enables pointer events of a selected button.
* @default true
*/
interactive?: boolean;
/** Applies disabled styles.
* @default false
*/
disabled?: boolean;
/** String based data hook. */
dataHook?: string;
/** Label content.
* @default ''
*/
labelValue?: ReactNode;
/** Label placement.
* @default 'tooltip'
*/
labelPlacement?: 'tooltip' | 'bottom' | 'end' | 'start';
/** Whether label should have ellipsis.
* @default false
*/
labelEllipsis?: boolean;
/**
* Tooltip props for label. Applied only when `labelPlacement` is `tooltip`.
* @linkTypeTo components-overlays--tooltip
* @setTypeName TooltipCommonProps
*/
tooltipProps?: TooltipCommonProps;
/** Applies border.
* @default false
*/
border?: boolean;
/** Button shape.
* @default 'square'
*/
shape?: 'square' | 'round' | 'pill';
tooltipDisabled?: boolean;
}>;
export type ToggleButtonSkin = 'standard' | 'dark' | 'inverted' | 'destructive' | 'success';
//# sourceMappingURL=ToggleButton.types.d.ts.map