The Node.js® Website
keii.dev
1import classNames from 'classnames';
2import type { FC, AnchorHTMLAttributes } from 'react';
3
4import Link from '@/components/Link';
5
6import styles from './index.module.css';
7
8type ButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
9 kind?: 'neutral' | 'primary' | 'secondary' | 'special';
10 // We have an extra `disabled` prop as we simulate a button
11 disabled?: boolean;
12};
13
14const Button: FC<ButtonProps> = ({
15 kind = 'primary',
16 disabled = false,
17 href = undefined,
18 children,
19 className,
20 ...props
21}) => (
22 <Link
23 role="button"
24 href={disabled ? undefined : href}
25 aria-disabled={disabled}
26 className={classNames(styles.button, styles[kind], className)}
27 {...props}
28 >
29 {children}
30 </Link>
31);
32
33export default Button;