@syncfusion/react-buttons/src/button/button.d.ts

Syncfusion React Buttons package is a feature-rich collection of UI components including Button, CheckBox, RadioButton, Switch, Chip, and more for building modern, interactive React applications.

import { ButtonHTMLAttributes } from 'react';
import { Color, Size, Variant, Position } from '@syncfusion/react-base';
import * as React from 'react';
export { Color, Size, Variant, Position };
/**
 * Button component properties interface.
 * Extends standard HTMLButtonElement attributes.
 */
export interface ButtonProps {
    /**
     * Specifies the position of the icon relative to the button text. Options include placing the icon at the left, right, top, or bottom of the button content.
     *
     * @default Position.Left
     */
    iconPosition?: Position;
    /**
     * Defines an icon for the button, which can either be a CSS class name for custom styling or an SVG element for rendering.
     *
     * @default -
     */
    icon?: React.ReactNode;
    /**
     * Indicates whether the button functions as a toggle button. If true, the button can switch between active and inactive states each time it is clicked.
     *
     * @default false
     */
    toggleable?: boolean;
    /**
     * Sets the initial selected state for a toggle button. When true, the button is initially rendered in a 'selected' or 'active' state, otherwise it's inactive.
     *
     * @default false
     */
    selected?: boolean;
    /**
     * Specifies the Color style of the button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error', and 'Info'.
     *
     * @default Color.Primary
     */
    color?: Color;
    /**
     * Specifies the variant style of the button. Options include 'Outlined', 'Filled', and 'Standard'.
     *
     * @default Variant.Filled
     */
    variant?: Variant;
    /**
     * Specifies the size style of the button. Options include 'Small', 'Medium' and 'Large'.
     *
     * @default Size.Medium
     */
    size?: Size;
    /**
     * Styles the button to visually appear as a hyperlink. When true, the button text is underlined.
     *
     * @default false
     */
    isLink?: boolean;
    /**
     * Specifies the dropdown button icon.
     *
     * @default false
     * @private
     */
    dropIcon?: boolean;
}
/**
 * Interface representing the Button component methods.
 */
export interface IButton extends ButtonProps {
    /**
     * This is button component element.
     *
     * @private
     * @default null
     */
    element?: HTMLElement | null;
}
type IButtonProps = IButton & ButtonHTMLAttributes<HTMLButtonElement>;
/**
 * The Button component is a versatile element for creating styled buttons with functionalities like toggling, icon positioning, and HTML attribute support, enhancing interaction based on its configuration and state.
 *
 * ```typescript
 * import { Button, Color } from '@syncfusion/react-buttons';
 *
 * <Button color={Color.Success}>Submit</Button>
 * ```
 */
export declare const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<IButton>>;
declare const _default: React.NamedExoticComponent<IButton & ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<IButton>>;
export default _default;