summaryrefslogtreecommitdiffstats
path: root/src/components/atoms/buttons/button.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-04-08 19:41:40 +0200
committerArmand Philippot <git@armandphilippot.com>2022-04-08 19:41:40 +0200
commita5df28fad0dae266a857ae110c43b3cb8b23c996 (patch)
treea32ea390e90697dc51c3ccb9018de9da2ee4fac3 /src/components/atoms/buttons/button.tsx
parent5c75a302c2203cb3ebf31233121026b4775662cf (diff)
refactor: use a consistent classname prop and avoid children prop
I was using the FunctionComponent type for some component that do not use children. So I change the type to VoidFunctionComponent to avoid mistakes. I also rename all the "classes" or "additionalClasses" props to "className" to keep consistency between each components.
Diffstat (limited to 'src/components/atoms/buttons/button.tsx')
-rw-r--r--src/components/atoms/buttons/button.tsx10
1 files changed, 5 insertions, 5 deletions
diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
index ae4c894..b223046 100644
--- a/src/components/atoms/buttons/button.tsx
+++ b/src/components/atoms/buttons/button.tsx
@@ -3,9 +3,9 @@ import styles from './buttons.module.scss';
export type ButtonProps = {
/**
- * Add additional classes to the button wrapper.
+ * Set additional classnames to the button wrapper.
*/
- additionalClasses?: string;
+ className?: string;
/**
* Button accessible label.
*/
@@ -17,7 +17,7 @@ export type ButtonProps = {
/**
* Button kind. Default: secondary.
*/
- kind?: 'primary' | 'secondary' | 'tertiary';
+ kind?: 'primary' | 'secondary' | 'tertiary' | 'neutral';
/**
* A callback function to handle click.
*/
@@ -38,7 +38,7 @@ export type ButtonProps = {
* Use a button as call to action.
*/
const Button: FC<ButtonProps> = ({
- additionalClasses,
+ className = '',
ariaLabel,
children,
disabled = false,
@@ -54,7 +54,7 @@ const Button: FC<ButtonProps> = ({
<button
type={type}
disabled={disabled}
- className={`${styles.btn} ${kindClass} ${shapeClass} ${additionalClasses}`}
+ className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
aria-label={ariaLabel}
{...props}
>