@yamada-ui/button/dist/button.d.ts

Yamada UI button components

import * as _yamada_ui_core from '@yamada-ui/core';
import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
import { LoadingProps } from '@yamada-ui/loading';
import { ReactElement, ElementType } from 'react';

interface ButtonOptions {
    /**
     * The type of button. Accepts `button`, `reset`, or `submit`.
     *
     * @default 'button'
     */
    type?: "button" | "reset" | "submit";
    /**
     * If `true`, the button is represented as active.
     *
     * @default false
     */
    active?: boolean;
    /**
     * If `true`, the button is disabled.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * If `true`, disable ripple effects when pressing a element.
     *
     * @default false
     */
    disableRipple?: boolean;
    /**
     * The icon to display at the end side of the button.
     */
    endIcon?: ReactElement;
    /**
     * If `true`, the button is full rounded. Else, it'll be slightly round.
     *
     * @default false
     */
    fullRounded?: boolean;
    /**
     * If `true`, the button is represented as active.
     *
     * @default false
     *
     * @deprecated Use `active` instead.
     */
    isActive?: boolean;
    /**
     * If `true`, the button is disabled.
     *
     * @default false
     *
     * @deprecated Use `disabled` instead.
     */
    isDisabled?: boolean;
    /**
     * If `true`, the loading state of the button is represented.
     *
     * @default false
     *
     * @deprecated Use `loading` instead.
     */
    isLoading?: boolean;
    /**
     * If `true`, the button is full rounded. Else, it'll be slightly round.
     *
     * @default false
     *
     * @deprecated Use `fullRounded` instead.
     */
    isRounded?: boolean;
    /**
     * The icon to display at the left side of the button.
     *
     * @deprecated Use `startIcon` instead.
     */
    leftIcon?: ReactElement;
    /**
     * If `true`, the loading state of the button is represented.
     *
     * @default false
     */
    loading?: boolean;
    /**
     * The icon to display when the button is loading.
     */
    loadingIcon?: LoadingProps["variant"] | ReactElement;
    /**
     * The placement of the loading indicator. Accepts `start` or `end`.
     *
     * @default 'start'
     */
    loadingPlacement?: "end" | "start";
    /**
     * The text to display when the button is loading.
     */
    loadingText?: string;
    /**
     * The icon to display at the right side of the button.
     *
     * @deprecated Use `endIcon` instead.
     */
    rightIcon?: ReactElement;
    /**
     * The icon to display at the start side of the button.
     */
    startIcon?: ReactElement;
}
interface ButtonProps extends HTMLUIProps<"button">, ThemeProps<"Button">, ButtonOptions {
}
/**
 * `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.
 *
 * @see Docs https://yamada-ui.com/components/forms/button
 */
declare const Button: _yamada_ui_core.Component<"button", ButtonProps>;
declare const useButtonType: (value?: ElementType) => {
    readonly ref: (node: HTMLElement | null) => void;
    readonly type: "button" | undefined;
};

export { Button, type ButtonProps, useButtonType };