retro-react
Version:
A React component library for building retro-style websites
58 lines (57 loc) • 2.15 kB
TypeScript
/// <reference types="react" />
import { ThemeUICSSObject } from 'theme-ui';
import { ButtonProps, ButtonSize } from '../button/Button';
interface ToggleButtonProps extends ButtonProps {
value?: string;
selected?: boolean;
}
export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
export interface ToggleButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* The children of this component, typically `ToggleButton` components.
*/
children?: React.ReactNode;
/**
* The size of the buttons. It will be passed to the `ToggleButton` children.
*/
size?: ButtonSize;
/**
* An array of values of the selected buttons in this group.
* It can be used to control the selection (controlled component).
*/
value?: string[];
/**
* A callback function that is called when the selected value changes.
* The new selection (array of values of the selected buttons) is passed as argument.
*/
onValueChange?: (value: string | string[]) => void;
/**
* If true, multiple buttons can be selected.
* If false (default), only one button can be selected.
*/
multiple?: boolean;
/**
* Additional style that should be applied to the group.
* It's a style object defined by Theme UI.
*/
sx?: ThemeUICSSObject;
}
/**
* A group of toggle buttons. It can be used to select one or multiple values. It's a controlled component.
* Uses `Button` to render the toggle buttons. You can apply the `Button` props to this component.
*
* @example
* ```tsx
*
* <ToggleButtonGroup
* value={selectedValues}
* onValueChange={(value) => setSelectedValues(value)}
* multiple
* >
* <ToggleButton value="first">A</ToggleButton>
* <ToggleButton value="second">B</ToggleButton>
* </ToggleButtonGroup>
* ```
*/
export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
export {};