@stihl-design-system/components/components/ActionButton/ActionButton.d.ts

Welcome to the STIHL Design System react component library.

import { ButtonHTMLAttributes } from 'react';
import { IconName, SelectedAriaAttributes } from '../../types';
import { IconProps } from '../Icon/Icon';
import { ActionButtonAriaAttribute, ActionButtonChevronDirection, ActionButtonIconPosition, ActionButtonIconSize, ActionButtonIndentLevel, ActionButtonWeight } from './ActionButton.utils';
export interface ActionButtonProps 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<ActionButtonAriaAttribute>;
    /** Direction of the optional chevron icon. If a direction is set, a chevron icon is displayed.   */
    chevronDirection?: ActionButtonChevronDirection;
    /** Custom data attributes. */
    [key: `data-${string}`]: string | undefined;
    /** Disables the button, preventing user interaction.
     * @default false
     */
    disabled?: boolean;
    /** Name of the icon to display. */
    iconName?: IconName;
    /** Position of the icon. `iconPosition='top'` requires either an `iconName` or `iconSource` to be set.
     * @default 'left'
     */
    iconPosition?: ActionButtonIconPosition;
    /** Size of the icon. **Only available with `iconPosition='left'` and a custom `iconSource`**.
     * @default 'large'
     */
    iconSize?: ActionButtonIconSize;
    /** URL or path for a custom icon. */
    iconSource?: IconProps['source'];
    /** Indent level of the button, used to align the button with other elements e.g. inside a DSAccordion. **Only available with `iconPosition='left'`**.
     * @default 0
     */
    indentLevel?: ActionButtonIndentLevel;
    /** Enables the active state.
     * @default false
     */
    isActive?: boolean;
    /** Number Indicator value displayed next to the label or above the icon. */
    numberIndicatorValue?: string;
    /** Stretches the button over the parent's width. **Only available with `iconPosition='left'`**.
     * @default false
     */
    stretched?: boolean;
    /** Defines the weight. **Only available with `iconPosition='left'`**.
     * @default 'normal'
     */
    weight?: ActionButtonWeight;
    /** Tooltip content. */
    tooltip?: string;
    /** Callback function called when the button is clicked. */
    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}
/**
 * Use the ActionButton component when you want the users to trigger an action, used in the DSDrawer as a mobile menu, as a parent of a Popover or in the DSTopBar of the DSHeader.
 *
 * Design in Figma: [Action Item](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=6307-72257&t=6MyKQ9TAUdzZ1XaJ-4)
 * */
export declare const DSActionButton: import('react').ForwardRefExoticComponent<ActionButtonProps & import('react').RefAttributes<HTMLButtonElement>>;