@itwin/itwinui-react/esm/core/Buttons/Button.d.ts

A react component library for iTwinUI

import * as React from 'react';
import { ButtonBase } from '../../utils/index.js';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
export type ButtonProps = {
    /**
     * Modify size of the button.
     */
    size?: 'small' | 'large';
    /**
     * Style of the button.
     * Use 'borderless' to hide outline.
     * @default 'default'
     */
    styleType?: 'cta' | 'high-visibility' | 'default' | 'borderless';
    /**
     * Icon shown before the main button content.
     */
    startIcon?: React.JSX.Element;
    /**
     * Icon shown after the main button content.
     */
    endIcon?: React.JSX.Element;
    /**
     * Passes props to the button label.
     */
    labelProps?: React.ComponentProps<'span'>;
    /**
     * Passes props to the start icon.
     */
    startIconProps?: React.ComponentProps<'span'>;
    /**
     * Passes props to the end icon.
     */
    endIconProps?: React.ComponentProps<'span'>;
    /**
     * Whether the button should stretch to fill the width of the container.
     *
     * This is useful on narrow containers and mobile views.
     */
    stretched?: boolean;
    /**
     * Specify a loading state for the button.
     */
    loading?: boolean;
} & Pick<React.ComponentProps<typeof ButtonBase>, 'htmlDisabled'>;
/**
 * Generic button component
 * @example
 * <Button>This is a default button</Button>
 * <Button disabled={true}>This is a disabled button</Button>
 * <Button size='large' styleType='high-visibility'>This is a large high visibility button</Button>
 * <Button size='small' styleType='cta'>This is a small call to action button</Button>
 * <Button startIcon={<SvgAdd />}>New</Button>
 */
export declare const Button: PolymorphicForwardRefComponent<"button", ButtonProps>;