vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
51 lines (50 loc) • 1.89 kB
TypeScript
import React from 'react';
import { INTENTS, NAMES, VARIANTS } from './types';
export type IconButtonIconNames = (typeof NAMES)[number];
export type IconButtonIntents = (typeof INTENTS)[number];
export type IconButtonVariants = (typeof VARIANTS)[number];
export interface IconButtonProps {
/**
* Describe the IconButton's response to interaction
* @remarks Required, but typed optional as translated strings return undefined on first render
* */
'aria-label'?: string;
/**
* true when IconButton should not be interactable
* @default false
* */
disabled?: boolean;
/** @default filled */
variant?: IconButtonVariants;
/** @default primary */
intent?: IconButtonIntents;
/**
* The Icon to be displayed within the IconButton
*/
iconName: IconButtonIconNames;
/**
* Function to be invoked on IconButton interaction
* */
onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
/**
* true to programmatically focus on the IconButton on render
* @default null
* */
autoFocus?: boolean;
/**
* Allows the background to bleed out into the surrounding layout,
* leaving the button to only take up the space for the icon itself.
*
* @default true for `variant=default`, false for others.
*/
bleed?: boolean;
/**
* Used to instruct the browser to defer loading of the icon
* when off-screen until the user scrolls near it.
*/
iconLoading?: React.ImgHTMLAttributes<HTMLImageElement>['loading'];
}
/**
* @deprecated Use `import { IconButton } from '@volvo-cars/react-icons'` instead. See [IconButton](https://developer.volvocars.com/design-system/web/?path=/docs/components-iconbutton--docs)
*/
export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;