diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-09-26 18:43:11 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-10-24 12:25:00 +0200 |
| commit | 388e687857345c85ee550cd5da472675e05a6ff5 (patch) | |
| tree | 0f035a3cad57a75959c028949a57227a83d480e2 /src/components/atoms/buttons/button-link.tsx | |
| parent | 70efcfeaa0603415dd992cb662d8efb960e6e49a (diff) | |
refactor(components): rewrite Button and ButtonLink components
Both:
* move styles to Sass placeholders
Button:
* add `isPressed` prop to Button
* add `isLoading` prop to Button (to differentiate state from
disabled)
ButtonLink:
* replace `external` prop with `isExternal` prop
* replace `href` prop with `to` prop
Diffstat (limited to 'src/components/atoms/buttons/button-link.tsx')
| -rw-r--r-- | src/components/atoms/buttons/button-link.tsx | 55 |
1 files changed, 0 insertions, 55 deletions
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx deleted file mode 100644 index c8180c9..0000000 --- a/src/components/atoms/buttons/button-link.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import Link from 'next/link'; -import { AnchorHTMLAttributes, FC, ReactNode } from 'react'; -import styles from './buttons.module.scss'; - -export type ButtonLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & { - /** - * The button link body. - */ - children: ReactNode; - /** - * True if it is an external link. Default: false. - */ - external?: boolean; - /** - * ButtonLink kind. Default: secondary. - */ - kind?: 'primary' | 'secondary' | 'tertiary'; - /** - * ButtonLink shape. Default: rectangle. - */ - shape?: 'circle' | 'rectangle' | 'square'; - /** - * Define an URL as target. - */ - target: string; -}; - -/** - * ButtonLink component - * - * Use a button-like link as call to action. - */ -export const ButtonLink: FC<ButtonLinkProps> = ({ - children, - className, - target, - kind = 'secondary', - shape = 'rectangle', - external = false, - ...props -}) => { - const kindClass = styles[`btn--${kind}`]; - const shapeClass = styles[`btn--${shape}`]; - const btnClass = `${styles.btn} ${kindClass} ${shapeClass} ${className}`; - - return external ? ( - <a {...props} className={btnClass} href={target}> - {children} - </a> - ) : ( - <Link {...props} className={btnClass} href={target}> - {children} - </Link> - ); -}; |
