blob: aeb84ec85e1c51797deea34b87f59e7a239c1db1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
import Button, { ButtonProps } from '@components/atoms/buttons/button';
import { VFC } from 'react';
import { useIntl } from 'react-intl';
import styles from './help-button.module.scss';
export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & {
/**
* Set additional classnames to the button wrapper.
*/
className?: string;
};
/**
* HelpButton component
*
* Render a button with an interrogation mark icon.
*/
const HelpButton: VFC<HelpButtonProps> = ({ className = '', onClick }) => {
const intl = useIntl();
const text = intl.formatMessage({
defaultMessage: 'Help',
id: 'i+/ckF',
description: 'HelpButton: screen reader text',
});
return (
<Button
shape="circle"
className={`${styles.btn} ${className}`}
onClick={onClick}
>
<span className="screen-reader-text">{text}</span>
<span className={styles.icon}>?</span>
</Button>
);
};
export default HelpButton;
|
