@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
72 lines (71 loc) • 2.73 kB
TypeScript
import { ButtonHTMLAttributes } from 'react';
import { BreakpointCustomizable, IconName, SelectedAriaAttributes, Theme } from '../../types';
import { IconProps } from '../Icon/Icon';
import { ButtonAriaAttribute, ButtonSize, ButtonVariant } from './Button.utils';
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
/** Content within the button. */
children: React.ReactNode;
/** ARIA attributes to enhance accessibility
* `{'aria-label'? string;`
* `'aria-expanded'?: boolean | 'true' | 'false';`
* `'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';`
* `'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';}`
* */
aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
/** Custom data attributes. */
[key: `data-${string}`]: string | undefined;
/** Disables the button, preventing user interaction.
* @default false
*/
disabled?: boolean;
/** Hides the button label, can be responsive.
* `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
* @default false
*/
hideLabel?: BreakpointCustomizable<boolean>;
/** Name of the icon to display. */
iconName?: IconName;
/** Position of the icon.
* @default 'left'
*/
iconPosition?: 'left' | 'right';
/** URL or path for a custom icon. */
iconSource?: IconProps['source'];
/** Aligns `variant='ghost'` with text.
* @default false
*/
isFlush?: boolean;
/** Shows loading indicator.
* @default false
*/
loading?: boolean;
/** Size of the button.
* @default 'medium'
*/
size?: ButtonSize;
/** Stretches the button over the parent's width.
* `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
* @default false
*/
stretched?: BreakpointCustomizable<boolean>;
/** Defines the theme.
* @default 'light'
*/
theme?: Theme;
/**
* Tooltip content.
*/
tooltip?: string;
/** Visual style variant of the button.
* @default 'filled'
*/
variant?: ButtonVariant;
/** Callback function called when the button is clicked. */
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}
/**
* Use the Button component to initialize an important action or to highlight the user journey.
*
* Design in Figma: [Button](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-3943&t=UBsmFURFENnuYSW1-11)
* */
export declare const DSButton: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;