@yandex/ui/Button/Button.d.ts

Yandex UI components

import React, { RefObject, ReactNode, ReactType, KeyboardEventHandler, MouseEventHandler, Ref, FocusEventHandler } from 'react';
import { KeyboardKeys } from '../lib/keyboard';
import { IconProvider } from './Icon/Button-Icon';
import './Button.css';
export declare type ContainerElement = HTMLButtonElement | HTMLAnchorElement;
export interface IButtonProps {
    /**
     * Дополнительный контент после `children`
     */
    addonAfter?: ReactNode;
    /**
     * Дополнительный контент перед `children`
     */
    addonBefore?: ReactNode;
    /**
     * Кнопка нажата
     */
    checked?: boolean;
    /**
     * Иконка на кнопке
     */
    icon?: IconProvider;
    /**
     * Иконка слева от текста кнопки
     */
    iconLeft?: IconProvider;
    /**
     * Иконка справа от текста кнопки
     */
    iconRight?: IconProvider;
    /**
     * Ссылка на корневой DOM элемент компонента
     */
    innerRef?: Ref<HTMLElement>;
    /**
     * Ссылка на DOM элемент нативного контрола
     */
    controlRef?: RefObject<ContainerElement>;
    /**
     * Набор клавиш, при нажатии на которые выставляется состояние `pressed`
     *
     * @default [Keys.SPACE, Keys.ENTER]
     */
    pressKeys?: KeyboardKeys[];
    /**
     * Стилевое оформление для визуального выделения прогресса
     */
    progress?: boolean;
    /**
     * Набор клавиш, при нажатии на которые прерывается событие
     *
     * @default []
     */
    prvntKeys?: KeyboardKeys[];
    /**
     * HTML-атрибут для рендера кнопки
     * @default 'button'
     */
    as?: ReactType;
    /**
     * Текст кнопки.
     */
    children?: ReactNode;
    /**
     * Тип кнопки.
     * @default 'button'
     */
    type?: string;
    /**
     * Неактивное состояние кнопки.
     * Состояние, при котором кнопка отображается, но недоступна для действий пользователя
     */
    disabled?: boolean;
    /**
     * Дополнительный класс
     */
    className?: string;
    /**
     * Уникальный id компонента
     */
    id?: string;
    /**
     * Обработчик события onKeyDown
     */
    onKeyDown?: KeyboardEventHandler<ContainerElement>;
    /**
     * Обработчик события `onKeyUp`
     */
    onKeyUp?: KeyboardEventHandler<ContainerElement>;
    /**
     * Обработчик клика на кнопку
     */
    onClick?: MouseEventHandler<ContainerElement>;
    /**
     * Событие по своему действию похоже на `onClick` и возникает в момент нажатия кнопки мыши.
     * `onClick` в каком-то смысле является комбинацией событий `onMouseDown` и `onMouseUp`
     */
    onMouseDown?: MouseEventHandler<ContainerElement>;
    /**
     * Обработчик события `onMouseUp`
     */
    onMouseUp?: MouseEventHandler<ContainerElement>;
    /**
     * Обработчик события `onMouseLeave`
     */
    onMouseLeave?: MouseEventHandler<ContainerElement>;
    /**
     * Обработчик события `onBlur`
     */
    onBlur?: FocusEventHandler<ContainerElement>;
    /**
     * Всплывающая подсказка
     */
    title?: string;
    /**
     * HTML-атрибут `role`
     */
    role?: string;
}
export interface IButtonState {
    pressed?: boolean;
}
export declare const cnButton: import("@bem-react/classname").ClassNameFormatter;
/**
 * Компонент для создания кнопок.
 * @param {IButtonProps} props
 */
export declare const Button: React.ComponentClass<IButtonProps, any>;