@payfit/unity-components
Version:
48 lines (47 loc) • 2.3 kB
TypeScript
import { UnityIcon } from '@payfit/unity-icons';
import { AriaRadioProps } from 'react-aria/useRadioGroup';
import { IconName } from '../../../types/utils.js';
export interface ToggleButtonProps extends AriaRadioProps {
/**
* The icon to display before the button text.
* The icon will automatically switch between outlined and filled variants based on the selection state:
* - When selected: Uses the filled variant (`${prefixIcon}Filled`)
* - When not selected: Uses the outlined variant (`${prefixIcon}Outlined`)
*/
prefixIcon?: IconName<UnityIcon>;
/**
* Whether the button is in a loading state.
* When `true`, the button content is replaced with a spinner and the button becomes non-interactive.
* Use this prop to indicate that an action is being processed after the button is clicked.
* @default false
*/
isLoading?: boolean;
}
/**
* The `ToggleButton` component is a specialized button used within a `SegmentedButtonGroup`.
* It functions like a radio button but is styled as a button, providing a more visual selection mechanism.
*
* `ToggleButton`s can display text, icons, or both, and support various states including selected, loading, and focused.
* They should always be used as children of a `SegmentedButtonGroup` component, which manages their selection state.
* @remarks
* This component must be used inside a SegmentedButtonGroup component
* @see {@link SegmentedButtonGroup} - The parent component required for ToggleButton
* @see {@link https://react-spectrum.adobe.com/react-aria/useRadio.html|React Aria useRadio} - The underlying hook used for accessibility
* @example
* Basic usage within a SegmentedButtonGroup:
* ```tsx
* import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
*
* function Example() {
* return (
* <SegmentedButtonGroup defaultValue="option1">
* <ToggleButton value="option1">Option 1</ToggleButton>
* <ToggleButton value="option2">Option 2</ToggleButton>
* <ToggleButton value="option3">Option 3</ToggleButton>
* </SegmentedButtonGroup>
* )
* }
* ```
*/
declare const ToggleButton: import('react').ForwardRefExoticComponent<ToggleButtonProps & import('react').RefAttributes<HTMLLabelElement>>;
export { ToggleButton };