mirror of
https://github.com/cpvalente/ontime.git
synced 2026-09-06 14:59:09 +00:00
Carlos Valente
b0c778fa62
Keep toggle styling and the accessible pressed state coupled in one reusable button.
19 lines
634 B
TypeScript
19 lines
634 B
TypeScript
import { ComponentProps } from 'react';
|
|
|
|
import Button from './Button';
|
|
|
|
type ToggleButtonProps = Omit<ComponentProps<typeof Button>, 'variant'> & {
|
|
/** whether the option this button controls is currently on */
|
|
pressed: boolean;
|
|
};
|
|
|
|
/**
|
|
* A button which carries an on / off state.
|
|
*
|
|
* Keeps the pressed styling and the accessible state together, so that a toggle
|
|
* cannot end up looking active without also announcing that it is.
|
|
*/
|
|
export default function ToggleButton({ pressed, ...buttonProps }: ToggleButtonProps) {
|
|
return <Button variant={pressed ? 'primary' : 'subtle'} aria-pressed={pressed} {...buttonProps} />;
|
|
}
|