@ui5/webcomponents-react/dist/webComponents/ToolbarButton/index.d.ts

React Wrapper for UI5 Web Components and additional components

import '@ui5/webcomponents/dist/ToolbarButton.js';
import type { ToolbarButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/ToolbarButton.js';
import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
import type ToolbarItemOverflowBehavior from '@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js';
import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base';
interface ToolbarButtonAttributes {
    /**
     * Defines the additional accessibility attributes that will be applied to the component.
     *
     * The following fields are supported:
     *
     * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.
     * Accepts the following string values: `true` or `false`
     *
     * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
     * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
     *
     * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.
     * Accepts a lowercase string value.
     * @default {}
     */
    accessibilityAttributes?: ToolbarButtonAccessibilityAttributes;
    /**
     * Defines the accessible ARIA name of the component.
     * @default undefined
     */
    accessibleName?: string | undefined;
    /**
     * Receives id(or many ids) of the elements that label the component.
     * @default undefined
     */
    accessibleNameRef?: string | undefined;
    /**
     * Defines the action design.
     * @default "Default"
     */
    design?: ButtonDesign | keyof typeof ButtonDesign;
    /**
     * Defines if the action is disabled.
     *
     * **Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.
     * @default false
     */
    disabled?: boolean;
    /**
     * Defines the icon, displayed as graphical element within the component after the button text.
     *
     * **Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.
     * Usage of `endIcon` only should be avoided.
     *
     * The SAP-icons font provides numerous options.
     *
     * Example:
     * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
     * @default undefined
     */
    endIcon?: string | undefined;
    /**
     * Defines the `icon` source URI.
     *
     * **Note:** SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
     * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
     * @default undefined
     */
    icon?: string | undefined;
    /**
     * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
     * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
     * @default "Default"
     */
    overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
    /**
     * Defines if the toolbar overflow popup should close upon interaction with the item.
     * It will close by default.
     * @default false
     */
    preventOverflowClosing?: boolean;
    /**
     * Defines whether the button text should only be displayed in the overflow popover.
     *
     * When set to `true`, the button appears as icon-only in the main toolbar,
     * but shows both icon and text when moved to the overflow popover.
     *
     * **Note:** This property only takes effect when the `text` property is also set.
     *
     * **Note:** Available since [v2.17.0](https://github.com/UI5/webcomponents/releases/tag/v2.17.0) of **@ui5/webcomponents**.
     * @default false
     */
    showOverflowText?: boolean;
    /**
     * Button text
     * @default undefined
     */
    text?: string | undefined;
    /**
     * Defines the tooltip of the component.
     *
     * **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
     * @default undefined
     */
    tooltip?: string | undefined;
    /**
     * Defines the width of the button.
     *
     * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
     * @default undefined
     */
    width?: string | undefined;
}
interface ToolbarButtonDomRef extends Required<ToolbarButtonAttributes>, Ui5DomRef {
}
interface ToolbarButtonPropTypes extends ToolbarButtonAttributes, Omit<CommonProps, keyof ToolbarButtonAttributes | 'onClick'> {
    /**
     * Fired when the component is activated either with a
     * mouse/tap or by using the Enter or Space key.
     *
     * **Note:** The event will not be fired if the `disabled`
     * property is set to `true`.
     *
     * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
     *
     * | cancelable | bubbles |
     * | :--------: | :-----: |
     * | ✅|✅|
     */
    onClick?: (event: Ui5CustomEvent<ToolbarButtonDomRef>) => void;
}
/**
 * The `ToolbarButton` represents an abstract action,
 * used in the `Toolbar`.
 *
 *
 *
 * __Note:__ This is a UI5 Web Component! [ToolbarButton UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ToolbarButton) | [Repository](https://github.com/UI5/webcomponents)
 *
 * @since [1.17.0](https://github.com/UI5/webcomponents/releases/tag/v1.17.0) of __@ui5/webcomponents__.
 * @abstract
 */
declare const ToolbarButton: import("react").ForwardRefExoticComponent<ToolbarButtonPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<ToolbarButtonDomRef>>;
export { ToolbarButton };
export type { ToolbarButtonDomRef, ToolbarButtonPropTypes };