@fluentui/react-northstar
Version:
A themable React component library.
91 lines (90 loc) • 4.3 kB
TypeScript
import { Accessibility } from '@fluentui/accessibility';
import { ShorthandConfig } from '@fluentui/react-bindings';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { UIComponentProps, ContentComponentProps, ChildrenComponentProps, ShorthandFactory } from '../../utils';
import { BoxProps } from '../Box/Box';
import { LoaderProps } from '../Loader/Loader';
import { ComponentEventHandler, ShorthandValue } from '../../types';
import { ButtonGroup } from './ButtonGroup';
import { ButtonContent, ButtonContentProps } from './ButtonContent';
export interface ButtonProps extends UIComponentProps, ContentComponentProps<ShorthandValue<ButtonContentProps>>, ChildrenComponentProps {
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility;
/** A button can appear circular. */
circular?: boolean;
/** A button can show that it cannot be interacted with. */
disabled?: boolean;
/** A button can fill the width of its container. */
fluid?: boolean;
/** A button can have an icon. */
icon?: ShorthandValue<BoxProps>;
/** A button can contain only an icon. */
iconOnly?: boolean;
/** An icon button can format its Icon to appear before or after its content */
iconPosition?: 'before' | 'after';
/** A button that inherits its background and has a subtle appearance */
inverted?: boolean;
/** Shorthand to customize a button's loader. */
loader?: ShorthandValue<LoaderProps>;
/** A button can show a loading indicator. */
loading?: boolean;
/** A button can be disabled and focusable at the same time. */
disabledFocusable?: boolean;
/**
* Called after a user clicks the button.
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onClick?: ComponentEventHandler<ButtonProps>;
/**
* Called after a user focuses the button.
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onFocus?: ComponentEventHandler<ButtonProps>;
/** A button can emphasize that it represents the primary action. */
primary?: boolean;
/** A button can be formatted to show only text in order to indicate a less-pronounced action. */
text?: boolean;
/** A button can emphasize that it represents an alternative action. */
secondary?: boolean;
/** A button can emphasize that it represents the tinted style. */
tinted?: boolean;
/** A button can be sized. */
size?: 'small' | 'medium';
/** A button can be elevated or flat. */
flat?: boolean;
}
export declare type ButtonStylesProps = Pick<ButtonProps, 'text' | 'primary' | 'tinted' | 'disabled' | 'disabledFocusable' | 'flat' | 'circular' | 'size' | 'loading' | 'inverted' | 'iconOnly' | 'fluid' | 'iconPosition'> & {
hasContent?: boolean;
};
export declare const buttonClassName = "ui-button";
/**
* A Button enables users to take an action, such as submitting a form, opening a dialog, etc.
*
* @accessibility
* Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern.
*/
export declare const Button: (<TExtendedElementType extends React.ElementType<any> = "button">(props: Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof ButtonProps> & {
as?: TExtendedElementType;
} & ButtonProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<ButtonProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<ButtonProps & {
as: "button";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
ref?: React.Ref<HTMLButtonElement>;
}, "as" | keyof ButtonProps> & {
as?: "button";
} & ButtonProps; /** A button can fill the width of its container. */
} & {
create: ShorthandFactory<ButtonProps>;
shorthandConfig: ShorthandConfig<ButtonProps>;
Content: typeof ButtonContent;
Group: typeof ButtonGroup;
};