@styleless-ui/react/Toggle/Toggle.d.ts

Completely unstyled, headless and accessible React UI components.

import * as React from "react";
import type { MergeElementProps } from "../typings";
interface OwnProps {
    /**
     * The content of the component.
     */
    children?: React.ReactNode | ((ctx: {
        disabled: boolean;
        active: boolean;
        focusedVisible: boolean;
    }) => React.ReactNode);
    /**
     * The className applied to the component.
     */
    className?: string | ((ctx: {
        disabled: boolean;
        active: boolean;
        focusedVisible: boolean;
    }) => string);
    /**
     * The value of the toggle. Use when it is a ToggleGroup's child.
     */
    value?: string;
    /**
     * If `true`, the toggle will be focused automatically.
     * @default false
     */
    autoFocus?: boolean;
    /**
     * If `true`, the toggle will be active.
     * @default false
     */
    active?: boolean;
    /**
     * The default state of `active`. Use when the component is not controlled.
     * @default false
     */
    defaultActive?: boolean;
    /**
     * If `true`, the toggle will be disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * The Callback is fired when the state of `active` changes.
     */
    onActiveChange?: (activeState: boolean) => void;
}
export type Props = Omit<MergeElementProps<"button", OwnProps>, "defaultValue" | "defaultChecked">;
declare const Toggle: (props: Props, ref: React.Ref<HTMLButtonElement>) => JSX.Element;
export default Toggle;