26 lines
701 B
TypeScript
26 lines
701 B
TypeScript
import type { ReactNode } from 'react';
|
|
import { ToggleButton } from 'react-aria-components';
|
|
|
|
import styles from './Toggle.module.css';
|
|
|
|
interface Props {
|
|
/** Name for a screen reader; it changes with the state, like the panel buttons do. */
|
|
label: string;
|
|
isSelected: boolean;
|
|
onChange: (isSelected: boolean) => void;
|
|
children: ReactNode;
|
|
}
|
|
|
|
/** A state button: pressed or not. The library keeps `aria-pressed` itself. */
|
|
export function Toggle({ label, isSelected, onChange, children }: Props) {
|
|
return (
|
|
<ToggleButton
|
|
className={styles.toggle}
|
|
aria-label={label}
|
|
isSelected={isSelected}
|
|
onChange={onChange}
|
|
>
|
|
{children}
|
|
</ToggleButton>
|
|
);
|
|
}
|