summaryrefslogtreecommitdiffstats
path: root/src/components/atoms/buttons
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/buttons')
-rw-r--r--src/components/atoms/buttons/button-link.tsx2
-rw-r--r--src/components/atoms/buttons/button.stories.tsx13
-rw-r--r--src/components/atoms/buttons/button.tsx10
-rw-r--r--src/components/atoms/buttons/buttons.module.scss4
4 files changed, 23 insertions, 6 deletions
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx
index 47fe4b0..81229c8 100644
--- a/src/components/atoms/buttons/button-link.tsx
+++ b/src/components/atoms/buttons/button-link.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
import { FC } from 'react';
import styles from './buttons.module.scss';
-type ButtonLinkProps = {
+export type ButtonLinkProps = {
/**
* ButtonLink accessible label.
*/
diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx
index 9f4061b..1061d83 100644
--- a/src/components/atoms/buttons/button.stories.tsx
+++ b/src/components/atoms/buttons/button.stories.tsx
@@ -33,6 +33,19 @@ export default {
required: true,
},
},
+ className: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set additional classnames to the button wrapper.',
+ table: {
+ category: 'Styles',
+ },
+ type: {
+ name: 'string',
+ required: false,
+ },
+ },
disabled: {
control: {
type: 'boolean',
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}
>
diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index a1c3dba..87c92db 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -28,6 +28,10 @@
cursor: wait;
}
+ &--neutral {
+ background: inherit;
+ }
+
&--primary {
background: var(--color-primary);
border: fun.convert-px(2) solid var(--color-bg);