Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 39 40 41 42 43 | 356x 1x 87x 87x 1x 1193x 1193x | import { MouseEventHandler, ReactElement, ReactNode } from "react";
import styled from "styled-components";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
interface Props {
children?: ReactNode;
onClick?: MouseEventHandler;
className?: string;
icon?: IconProp;
}
export const TertiaryButton = ({
children,
onClick,
className,
icon,
}: Props): ReactElement => {
return (
<StyledButton className={className} onClick={onClick}>
{icon && <StyledIcon icon={icon} aria-hidden="true" />}
{children}
</StyledButton>
);
};
const StyledIcon = styled(FontAwesomeIcon)`
color: ${(props) => props.theme.textLink};
font-size: ${(props) => props.theme.iconSizeSmall};
padding-right: 4px;
vertical-align: middle;
`;
const StyledButton = styled.button`
font-size: ${(props) => props.theme.fontSizeSmall};
text-decoration: underline;
color: ${(props) => props.theme.textLink};
cursor: pointer;
border: none;
background-color: inherit;
padding-left: 0;
`;
|