@sinchsmb/ui-kit/dist/types/components/Button/Button.d.ts

UI kit for SinchSMB frontend

import { AriaAttributes, ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
import { CommonProps } from '../../types';
import { IconGlyph } from '../Icon/constants';
import { ButtonAppearance } from './constants';
export interface ButtonProps extends CommonProps, Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onMouseDown' | 'onKeyDown' | 'onClick' | 'name' | 'value' | 'id'> {
    ariaLabel?: AriaAttributes['aria-label'];
    ariaDescribedBy?: AriaAttributes['aria-describedby'];
    ariaErrorMessage?: AriaAttributes['aria-errormessage'];
    ariaInvalid?: AriaAttributes['aria-invalid'];
    /** Icon that will be shown left of button */
    icon?: IconGlyph | ReactElement;
    /** Visual button appearance */
    appearance?: ButtonAppearance;
    /** Flag that disable or enable button */
    disabled?: boolean;
    /** type of button default value "button" */
    type?: 'button' | 'submit' | 'reset' | undefined;
    /** Content that should be shown in button */
    children?: ReactNode;
}
/**
 * A Button triggers an event or action, and let us know what happens next. Can be used in any part of the application.
 *
 * ## Appearance
 *
 * Button supports set of default appearances:
 *
 * | Appearance                             | Example                                                   | Purpose                                                                    |
 * | -------------------------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------- |
 * | {@link ButtonAppearance.Default}       | <Story id="components-button--default" noCanvas />        | Default button style                                                       |
 * | {@link ButtonAppearance.Primary}       | <Story id="components-button--primary" noCanvas />        | Calls for a primary action. Tend having only one Primary button on a page. |
 * | {@link ButtonAppearance.Subtle}        | <Story id="components-button--subtle" noCanvas />         | Tertiary action                                                            |
 * | {@link ButtonAppearance.SubtlePrimary} | <Story id="components-button--subtle-primary" noCanvas /> | Tertiary action                                                            |
 * | {@link ButtonAppearance.Danger}        | <Story id="components-button--danger" noCanvas />         | Calls for deleting or other dangerous/irreversible action                  |
 *
 * Appearance can be set with {@link ButtonProps.appearance} prop.
 *
 * ## Icon
 *
 * A button can contain an Icon, if {@link ButtonProps.icon} is provided.
 *
 * <Story id="components-button--with-icon" noCanvas />
 *
 * ## Type
 *
 * A button has type="button". Possible values "button" | "submit" | "reset"
 *
 * ```tsx
 * import { Button } from "ui-kit";
 *
 * <Button appearance={ButtonAppearance.Primary} icon={IconGlyph.Sms}>Send SMS</Button>
 * ```
 */
export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;