mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-26 17:39:58 +00:00
feat(buttons): add ToggleButton component
Keep toggle styling and the accessible pressed state coupled in one reusable button.
This commit is contained in:
@@ -0,0 +1,18 @@
|
|||||||
|
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} />;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user