diff options
Diffstat (limited to 'src/components/atoms/buttons')
| -rw-r--r-- | src/components/atoms/buttons/button.stories.tsx | 2 | ||||
| -rw-r--r-- | src/components/atoms/buttons/button.tsx | 13 | ||||
| -rw-r--r-- | src/components/atoms/buttons/buttons.module.scss | 7 |
3 files changed, 17 insertions, 5 deletions
diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx index bec5e5d..9f4061b 100644 --- a/src/components/atoms/buttons/button.stories.tsx +++ b/src/components/atoms/buttons/button.stories.tsx @@ -80,7 +80,7 @@ export default { type: 'select', }, description: 'The link shape.', - options: ['rectangle', 'square'], + options: ['circle', 'rectangle', 'square'], table: { category: 'Options', defaultValue: { summary: 'rectangle' }, diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx index 08b8d67..ae4c894 100644 --- a/src/components/atoms/buttons/button.tsx +++ b/src/components/atoms/buttons/button.tsx @@ -3,9 +3,13 @@ import styles from './buttons.module.scss'; export type ButtonProps = { /** + * Add additional classes to the button wrapper. + */ + additionalClasses?: string; + /** * Button accessible label. */ - 'aria-label'?: string; + ariaLabel?: string; /** * Button state. Default: false. */ @@ -21,7 +25,7 @@ export type ButtonProps = { /** * Button shape. Default: rectangle. */ - shape?: 'rectangle' | 'square'; + shape?: 'circle' | 'rectangle' | 'square'; /** * Button type attribute. Default: button. */ @@ -34,6 +38,8 @@ export type ButtonProps = { * Use a button as call to action. */ const Button: FC<ButtonProps> = ({ + additionalClasses, + ariaLabel, children, disabled = false, kind = 'secondary', @@ -48,7 +54,8 @@ const Button: FC<ButtonProps> = ({ <button type={type} disabled={disabled} - className={`${styles.btn} ${kindClass} ${shapeClass}`} + className={`${styles.btn} ${kindClass} ${shapeClass} ${additionalClasses}`} + aria-label={ariaLabel} {...props} > {children} diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss index 6784de9..a1c3dba 100644 --- a/src/components/atoms/buttons/buttons.module.scss +++ b/src/components/atoms/buttons/buttons.module.scss @@ -14,11 +14,16 @@ padding: var(--spacing-2xs) var(--spacing-md); } - &--square { + &--square, + &--circle { padding: var(--spacing-xs); aspect-ratio: 1 / 1; } + &--circle { + border-radius: 50%; + } + &:disabled { cursor: wait; } |
