@payfit/unity-components/dist/esm/components/selectable-button-group/parts/SelectableButton.d.ts

import { ToggleButtonProps } from 'react-aria-components/ToggleButton';
import { AriaToggleButtonProps } from 'react-aria/useToggleButton';
import { UnityIcon } from '@payfit/unity-icons';
export declare const selectableButton: import('tailwind-variants').TVReturnType<{
    hasIcon: {
        true: {
            base: string;
        };
        false: {
            base: string;
        };
    };
}, {
    base: string[];
    icon: string[];
    label: string[];
}, undefined, {
    hasIcon: {
        true: {
            base: string;
        };
        false: {
            base: string;
        };
    };
}, {
    base: string[];
    icon: string[];
    label: string[];
}, import('tailwind-variants').TVReturnType<{
    hasIcon: {
        true: {
            base: string;
        };
        false: {
            base: string;
        };
    };
}, {
    base: string[];
    icon: string[];
    label: string[];
}, undefined, unknown, unknown, undefined>>;
type IconName<T extends string> = T extends `${infer Base}${'Filled' | 'Outlined'}` ? Base : T;
export interface SelectableButtonProps extends Omit<AriaToggleButtonProps, 'id' | 'className' | 'style'> {
    /**
     * A unique identifier for the button that will be used as its selection value.
     * This value must be unique within the SelectableButtonGroup.
     */
    value: NonNullable<ToggleButtonProps['id']>;
    /**
     * Optional icon to display before the button's text content.
     * The icon will automatically switch between outlined and filled variants based on selection state.
     * Specify the base name of the icon without the 'Filled' or 'Outlined' suffix.
     */
    prefixIcon?: IconName<UnityIcon>;
    /**
     * Set to true to show a loading spinner and disable interaction.
     * Use this when the button's action requires asynchronous processing.
     * @default false
     */
    isLoading?: boolean;
    /**
     * Customize the style
     */
    className?: string;
}
/**
 * A toggleable button that works as part of a SelectableButtonGroup to create single or multiple choice selections.
 * Provides visual feedback for selection state and supports icons for enhanced visual hierarchy.
 * @component
 * @param {SelectableButtonProps} props - Props for configuring the button's behavior and appearance
 * @see {@link SelectableButtonProps} for all available props
 * @example
 * ```tsx
 * import { SelectableButtonGroup, SelectableButton } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <SelectableButtonGroup selectionMode="single" defaultValue={['morning']}>
 *       <SelectableButton value="morning">
 *         Morning
 *       </SelectableButton>
 *       <SelectableButton value="afternoon" prefixIcon="Sun">
 *         Afternoon
 *       </SelectableButton>
 *     </SelectableButtonGroup>
 *   )
 * }
 * ```
 * @remarks
 * [API](mdc:components/selectable-button-group/parts/SelectableButton) • [Design docs](mdc:design/components/selectable-button-group)
 */
declare const SelectableButton: import('react').ForwardRefExoticComponent<SelectableButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
export { SelectableButton };