2 files changed, 11 insertions, 10 deletions
diff --git a/src/components/molecules/buttons/heading-button.module.scss b/src/components/molecules/buttons/heading-button.module.scss
index d068001..1d16410 100644
--- a/src/components/molecules/buttons/heading-button.module.scss
+++ b/src/components/molecules/buttons/heading-button.module.scss
@@ -11,7 +11,7 @@
   justify-content: space-between;
   gap: var(--spacing-md);
   width: 100%;
-  padding: 0;
+  padding: 0 var(--spacing-2xs);
   position: sticky;
   top: 0;
   background: inherit;
diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx
index 700b3e1..fc79749 100644
--- a/src/components/molecules/buttons/heading-button.tsx
+++ b/src/components/molecules/buttons/heading-button.tsx
@@ -1,11 +1,15 @@
 import Heading, { type HeadingProps } from '@components/atoms/headings/heading';
 import PlusMinus from '@components/atoms/icons/plus-minus';
-import { FC, SetStateAction } from 'react';
+import { SetStateAction, VFC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './heading-button.module.scss';
 
 export type HeadingButtonProps = Pick<HeadingProps, 'level'> & {
   /**
+   * Set additional classnames to the button.
+   */
+  className?: string;
+  /**
    * Accordion state.
    */
   expanded: boolean;
@@ -24,7 +28,8 @@ export type HeadingButtonProps = Pick<HeadingProps, 'level'> & {
  *
  * Render a button as accordion title to toggle body.
  */
-const HeadingButton: FC<HeadingButtonProps> = ({
+const HeadingButton: VFC<HeadingButtonProps> = ({
+  className = '',
   expanded,
   level,
   setExpanded,
@@ -47,18 +52,14 @@ const HeadingButton: FC<HeadingButtonProps> = ({
   return (
     <button
       type="button"
-      className={styles.wrapper}
+      className={`${styles.wrapper} ${className}`}
       onClick={() => setExpanded(!expanded)}
     >
-      <Heading
-        level={level}
-        withMargin={false}
-        additionalClasses={styles.heading}
-      >
+      <Heading level={level} withMargin={false} className={styles.heading}>
         <span className="screen-reader-text">{titlePrefix} </span>
         {title}
       </Heading>
-      <PlusMinus state={iconState} additionalClasses={styles.icon} />
+      <PlusMinus state={iconState} className={styles.icon} />
     </button>
   );
 };