alouette/dist/definitions/ui/actions/Button.d.ts

A modern, customizable design system built on top of NativeWind v5 with configurable defaults

import { type ReactNode, type Ref } from "react";
import type { View as RNView } from "react-native";
import { type VariantProps } from "tailwind-variants";
import type { controlHeightsPx } from "../../controlSizes";
import type { AccentOrNeutral } from "../../core/AlouetteConfig";
import { type ExternalOpenLinkBehavior } from "../../expo/ExternalLink.shared";
import { type SVGIconElement } from "../primitives/Icon";
import { type PressableBoxProps } from "./PressableBox";
/** `lg` is the prominent call to action of a landing page or a hero. */
export type ButtonSize = keyof (typeof controlHeightsPx)["comfortable"];
declare const buttonVariants: import("tailwind-variants").TVReturnType<{
    size: {
        sm: {
            frame: string;
            text: string;
        };
        md: {
            frame: string;
            text: string;
        };
        lg: {
            frame: string;
            text: string;
        };
    };
    variant: {
        tonal: {};
        filled: {};
        outlined: {};
        soft: {};
    };
    disabled: {
        true: {};
        false: {};
    };
    dimmed: {
        true: {
            text: string;
            icon: string;
        };
        false: {};
    };
}, {
    frame: string;
    text: string;
    icon: string;
    terminalIcon: string;
    overlayIconContainer: string;
}, undefined, {
    size: {
        sm: {
            frame: string;
            text: string;
        };
        md: {
            frame: string;
            text: string;
        };
        lg: {
            frame: string;
            text: string;
        };
    };
    variant: {
        tonal: {};
        filled: {};
        outlined: {};
        soft: {};
    };
    disabled: {
        true: {};
        false: {};
    };
    dimmed: {
        true: {
            text: string;
            icon: string;
        };
        false: {};
    };
}, {
    frame: string;
    text: string;
    icon: string;
    terminalIcon: string;
    overlayIconContainer: string;
}, import("tailwind-variants").TVReturnType<{
    size: {
        sm: {
            frame: string;
            text: string;
        };
        md: {
            frame: string;
            text: string;
        };
        lg: {
            frame: string;
            text: string;
        };
    };
    variant: {
        tonal: {};
        filled: {};
        outlined: {};
        soft: {};
    };
    disabled: {
        true: {};
        false: {};
    };
    dimmed: {
        true: {
            text: string;
            icon: string;
        };
        false: {};
    };
}, {
    frame: string;
    text: string;
    icon: string;
    terminalIcon: string;
    overlayIconContainer: string;
}, undefined, unknown, unknown, undefined>>;
interface ButtonSizeProps {
    /** `lg` is for the prominent call to action of a landing page or a hero. */
    size?: ButtonSize;
}
export type ButtonState = "failed" | "loading" | "success";
export interface ButtonProps extends Omit<PressableBoxProps, "children" | "variant">, ButtonSizeProps {
    variant?: VariantProps<typeof buttonVariants>["variant"];
    icon?: SVGIconElement;
    /** Replaces `icon` while the button is hovered, focused or pressed. */
    activeIcon?: SVGIconElement;
    /** Defaults to the inherited accent, or `brand` outside an accent scope. */
    accent?: AccentOrNeutral;
    text: ReactNode;
    state?: ButtonState;
    /**
     * Why the button is disabled. A non-empty reason disables it, describes it
     * with the reason and, on web, shows the reason on hover.
     */
    disabledReason?: string | null;
    /**
     * Forwarded to the underlying `PressableBox`, so the button can anchor a
     * `Popover` or a `Menu`. React 19 carries it in with the other props.
     */
    ref?: Ref<RNView>;
}
export declare function Button({ disabledReason, ...buttonProps }: ButtonProps): ReactNode;
export interface ExternalLinkButtonProps extends ButtonProps {
    href: string;
    /** How the link opens. Defaults to an in-app browser sheet / a new tab. */
    openLinkBehavior?: ExternalOpenLinkBehavior;
}
export declare function ExternalLinkButton({ href, openLinkBehavior, onPress, ...buttonProps }: ExternalLinkButtonProps): ReactNode;
export interface InternalLinkButtonProps extends ButtonProps {
    href: string;
}
export declare function InternalLinkButton({ href: _href, ...buttonProps }: InternalLinkButtonProps): ReactNode;
export {};
//# sourceMappingURL=Button.d.ts.map