@payfit/unity-components
Version:
44 lines (43 loc) • 2.28 kB
TypeScript
import { ReactNode } from 'react';
import { RadioGroupProps } from 'react-aria-components/RadioGroup';
export interface BasedSegmentedButtonGroupProps extends Omit<RadioGroupProps, 'children' | 'style' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'validationBehavior' | 'isRequired' | 'validate' | 'defaultValue'> {
/**
* The content of the `SegmentedButtonGroup`. Should contain `ToggleButton` components as children.
*/
children: ReactNode;
}
export interface UncontrolledSegmentedButtonGroupProps extends BasedSegmentedButtonGroupProps, Required<Pick<RadioGroupProps, 'defaultValue'>> {
}
/**
* The `SegmentedButtonGroup` component is an accessible control that allows users to select one option from a set of mutually exclusive options.
* It's similar to a radio group but styled as connected buttons, providing a more compact and visually distinct selection mechanism.
* Use this component when you need to:
* - Present a small set of related but mutually exclusive options
* - Create a toggle between different views or modes
* - Provide a compact alternative to radio buttons or tabs
* - Allow users to switch between different states of the same content*
* The component supports both controlled and uncontrolled usage patterns.
* @see {@link ToggleButton} - The child component used within SegmentedButtonGroup
* @see {@link https://react-spectrum.adobe.com/react-aria/useRadioGroup.html|React Aria useRadioGroup} - The underlying hook used for accessibility
* @see {@link https://www.payfit.design/24f360409/p/2745fe-segmented-control|Design System Documentation}
* @example
* Basic usage:
* ```tsx
* import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
*
* function Example() {
* return (
* <SegmentedButtonGroup>
* <ToggleButton value="option1">Option 1</ToggleButton>
* <ToggleButton value="option2">Option 2</ToggleButton>
* <ToggleButton value="option3">Option 3</ToggleButton>
* </SegmentedButtonGroup>
* )
* }
* ```
*/
declare const SegmentedButtonGroup: {
(props: UncontrolledSegmentedButtonGroupProps | BasedSegmentedButtonGroupProps): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
export { SegmentedButtonGroup };