@yamada-ui/toggle/dist/toggle.d.mts

Yamada UI toggle component

import { HTMLUIProps, ThemeProps, ComponentArgs } from '@yamada-ui/core';
import { RefAttributes, ReactElement } from 'react';

interface ToggleOptions<Y extends number | string = string> {
    /**
     * If `true`, the toggle button is represented as active.
     *
     * @default false
     */
    active?: boolean;
    /**
      *If `true`, the toggle button will be initially selected.
     *
    @default false
  
    @deprecated Use `defaultSelected` instead.
     */
    defaultIsSelected?: boolean;
    /**
      *If `true`, the toggle button will be initially selected.
     *
    @default false
     */
    defaultSelected?: boolean;
    /**
     * If `true`, the toggle button will be disabled.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * If `true`, disable ripple effects when pressing a element.
     *
     * @default false
     */
    disableRipple?: boolean;
    /**
     * If true, the toggle button is full rounded. Else, it'll be slightly round.
     *
     * @default false
     */
    fullRounded?: boolean;
    /**
     * The icon to be used in the button.
     */
    icon?: ReactElement;
    /**
     * If `true`, the toggle button is represented as active.
     *
     * @default false
     *
     * @deprecated Use `active` instead.
     */
    isActive?: boolean;
    /**
     * If `true`, the toggle button will be disabled.
     *
     * @default false
     *
     * @deprecated Use `disabled` instead.
     */
    isDisabled?: boolean;
    /**
     * If `true`, the toggle button will be readonly.
     *
     * @default false
     *
     * @deprecated Use `readOnly` instead.
     */
    isReadOnly?: boolean;
    /**
     * If true, the toggle button is full rounded. Else, it'll be slightly round.
     *
     * @default false
     *
     * @deprecated Use `fullRounded` instead.
     */
    isRounded?: boolean;
    /**
     * If `true`, the toggle button will be selected.
     *
     * @deprecated Use `selected` instead.
     */
    isSelected?: boolean;
    /**
     * If `true`, the toggle button will be readonly.
     *
     * @default false
     */
    readOnly?: boolean;
    /**
     * If `true`, the toggle button will be selected.
     */
    selected?: boolean;
    /**
     * The value of the toggle button.
     */
    value?: Y;
    /**
     * The callback invoked when selected state changes.
     */
    onChange?: (selected: boolean) => void;
}
interface ToggleProps<Y extends number | string = string> extends Omit<HTMLUIProps<"button">, "onChange" | "value">, ThemeProps<"Toggle">, ToggleOptions<Y> {
}
/**
 * `Toggle` is a two-state button that can be either on or off.
 *
 * @see Docs https://yamada-ui.com/components/forms/toggle
 */
declare const Toggle: {
    <Y extends number | string = string>(props: RefAttributes<HTMLButtonElement> & ToggleProps<Y>): ReactElement;
} & ComponentArgs;

export { Toggle, type ToggleProps };