/*! * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") * * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * * See the License for the specific language governing permissions and limitations under the License. */ import type { ButtonProps as MuiButtonProps } from "@mui/material"; import { HTMLAttributes, ReactElement, ReactNode, RefObject } from "react"; import type { HtmlProps } from "../HtmlProps.js"; import { FocusHandle } from "../inputUtils.js"; export declare const buttonSizeValues: readonly ["small", "medium", "large"]; export declare const buttonTypeValues: readonly ["button", "submit", "reset"]; export declare const buttonVariantValues: readonly ["primary", "secondary", "danger", "dangerSecondary", "floating", "floatingAction"]; export type BaseButtonProps = { /** * Ref attached to the underlying button element, exposing a `focus()` handle. */ buttonRef?: RefObject; /** * The contents of the button. Only available internal to Odyssey here in BaseButton. If set, label is ignored. */ children?: ReactNode; /** * The icon element to display at the end of the Button */ endIcon?: ReactElement; /** * The ID of the form the Button belongs to. Use it to submit or reset a form from a Button outside that form, such as a `Dialog` footer action. Has no effect when `href` is set. */ formId?: string; /** * Optional href to render the button as a link */ href?: string; /** * The ID of the Button */ id?: string; /** * If `true`, the button is disabled and cannot be activated. */ isDisabled?: boolean; /** * If `true`, the button expands to fill its container's full width. */ isFullWidth?: boolean; /** * If `true`, the button shows a progress spinner in place of its start icon and stops responding to clicks, while keeping the background and border of its default state. To reword the button while it works (for example `"Saving…"`), swap `label` alongside this. */ isLoading?: boolean; /** * The text content of the Button. * @default "" */ label?: string; /** * Called when the button is clicked. */ onClick?: MuiButtonProps["onClick"]; /** * The size of the button. * @default "medium" */ size?: (typeof buttonSizeValues)[number]; /** * The icon element to display at the start of the Button */ startIcon?: ReactElement; /** The tab order of the Button relative to other focusable elements. */ tabIndex?: HTMLAttributes["tabIndex"]; /** * The tooltip text for the Button if it's icon-only */ tooltipText?: string; /** * The HTML button type attribute. * - If `'button'`, no default form behavior. * - If `'submit'`, submits the nearest form. * - If `'reset'`, resets the nearest form to its initial values. * @default "button" */ type?: (typeof buttonTypeValues)[number]; /** * Controls the visual hierarchy and intent of the button. * - If `'primary'`, high-emphasis action; use for the single most important action on a page. * - If `'secondary'`, medium-emphasis action; use for secondary actions alongside a primary. * - If `'danger'`, high-emphasis destructive action. * - If `'dangerSecondary'`, medium-emphasis destructive action. * - If `'floating'`, low-emphasis action without a border or background. * - If `'floatingAction'`, icon-only floating action, typically fixed-positioned. * - If `'tertiary'`, deprecated low-emphasis style; use `'floating'` instead. */ variant: (typeof buttonVariantValues)[number] | "tertiary"; }; export type AdditionalBaseButtonProps = Pick; declare const MemoizedBaseButton: import("react").MemoExoticComponent<({ ariaControls, ariaDescribedBy, ariaExpanded, ariaHasPopup, ariaLabel, ariaLabelledBy, ariaPressed, buttonRef, children, endIcon, formId, href, id, isDisabled, isFullWidth: isFullWidthProp, isLoading, label, onClick, size, startIcon, tabIndex, testId, tooltipText, translate, type, variant: variantProp, }: BaseButtonProps & AdditionalBaseButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element>; export { MemoizedBaseButton as BaseButton }; //# sourceMappingURL=BaseButton.d.ts.map