diff options
Diffstat (limited to 'src/components/molecules/buttons/back-to-top/back-to-top.tsx')
| -rw-r--r-- | src/components/molecules/buttons/back-to-top/back-to-top.tsx | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.tsx b/src/components/molecules/buttons/back-to-top/back-to-top.tsx new file mode 100644 index 0000000..83e2161 --- /dev/null +++ b/src/components/molecules/buttons/back-to-top/back-to-top.tsx @@ -0,0 +1,45 @@ +import type { FC } from 'react'; +import { + ButtonLink, + type ButtonLinkProps, + Icon, + VisuallyHidden, +} from '../../../atoms'; +import styles from './back-to-top.module.scss'; + +export type BackToTopProps = Omit< + ButtonLinkProps, + 'children' | 'isExternal' | 'kind' | 'to' +> & { + /** + * Define the anchor. + */ + anchor: string; + /** + * Define an accessible label for the button. + */ + label: string; +}; + +/** + * BackToTop component + * + * Render a back to top link. + */ +export const BackToTop: FC<BackToTopProps> = ({ + anchor, + className = '', + label, + shape = 'square', + ...props +}) => { + const btnClass = `${styles.link} ${className}`; + + return ( + <ButtonLink {...props} className={btnClass} shape={shape} to={anchor}> + {/* eslint-disable-next-line react/jsx-no-literals -- Config allowed */} + <Icon aria-hidden orientation="top" shape="arrow" /> + <VisuallyHidden>{label}</VisuallyHidden> + </ButtonLink> + ); +}; |
