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

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

import type { ReactNode, Ref } from "react";
import type { View as RNView } from "react-native";
import type { VariantProps } from "tailwind-variants";
import type { SVGIconElement } from "../primitives/Icon";
import { type PressableBoxProps } from "./PressableBox";
declare const iconButtonVariants: import("tailwind-variants").TVReturnType<{
    variant: {
        tonal: {};
        filled: {};
        soft: {};
    };
    disabled: {
        true: {};
        false: {};
    };
    forced: {
        true: {};
        false: {};
    };
}, {
    frame: string;
    icon: string;
}, undefined, {
    variant: {
        tonal: {};
        filled: {};
        soft: {};
    };
    disabled: {
        true: {};
        false: {};
    };
    forced: {
        true: {};
        false: {};
    };
}, {
    frame: string;
    icon: string;
}, import("tailwind-variants").TVReturnType<{
    variant: {
        tonal: {};
        filled: {};
        soft: {};
    };
    disabled: {
        true: {};
        false: {};
    };
    forced: {
        true: {};
        false: {};
    };
}, {
    frame: string;
    icon: string;
}, undefined, unknown, unknown, undefined>>;
export interface IconButtonProps extends Omit<PressableBoxProps, "children" | "variant"> {
    variant?: VariantProps<typeof iconButtonVariants>["variant"];
    /**
     * 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>;
    icon: SVGIconElement;
    /** Replaces `icon` while the button is hovered, focused or pressed. */
    activeIcon?: SVGIconElement;
    /**
     * Preset size, the height of a `Button` of that size in the current density,
     * or any number for a custom diameter (px).
     */
    size?: number | "md" | "sm";
    /** When "fill", the icon takes 80% of the button; default uses 50%. */
    iconSize?: "fill";
    "aria-label": string;
    /**
     * 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;
}
export declare function IconButton({ disabledReason, ...iconButtonProps }: IconButtonProps): ReactNode;
export {};
//# sourceMappingURL=IconButton.d.ts.map