ente/web/packages/base/components/mui/FocusVisibleButton.tsx
2024-10-08 10:38:08 +05:30

18 lines
514 B
TypeScript

import { Button, styled, type ButtonProps } from "@mui/material";
import React from "react";
export const RippleDisabledButton: React.FC<ButtonProps> = (props) => (
<Button disableRipple {...props} />
);
/**
* A MUI {@link Button} that shows a keyboard focus indicator, e.g. when the
* user tabs to it
*/
export const FocusVisibleButton = styled(RippleDisabledButton)`
&.Mui-focusVisible {
outline: 1px solid ${(props) => props.theme.colors.stroke.base};
outline-offset: 2px;
}
`;