diff --git a/src/stories/Library/availability-label/AvailabilityLabel.stories.tsx b/src/stories/Library/availability-label/AvailabilityLabel.stories.tsx
index 704258aa4..0dd0cc649 100644
--- a/src/stories/Library/availability-label/AvailabilityLabel.stories.tsx
+++ b/src/stories/Library/availability-label/AvailabilityLabel.stories.tsx
@@ -11,17 +11,25 @@ export default {
     manifestationType: {
       name: "Manifestation Type",
       options: ["Bog", "Ebog", "Lydbog (net)", "Lydbog (cd-mp3)", undefined],
-      control: { disable: true },
+      control: "radio",
     },
     availability: {
       name: "Availability",
       options: ["Hjemme", "Online", "Udlånt"],
-      control: { disable: true },
+      control: "radio",
     },
     status: {
       name: "Status",
       options: ["available", "unavailable", "selected"],
-      control: { disable: true },
+      control: "radio",
+    },
+    quantity: {
+      name: "Quantity",
+      control: "number",
+    },
+    button: {
+      name: "Button",
+      control: "boolean",
     },
   },
   parameters: {},
@@ -36,6 +44,7 @@ Available.args = {
   manifestationType: "Bog",
   availability: "Hjemme",
   status: "available",
+  button: true,
 };
 
 export const Selected = Template.bind({});
@@ -43,6 +52,7 @@ Selected.args = {
   manifestationType: "Ebog",
   availability: "Online",
   status: "selected",
+  button: true,
 };
 
 export const Unavailable = Template.bind({});
@@ -50,6 +60,7 @@ Unavailable.args = {
   manifestationType: "Lydbog (cd-mp3)",
   availability: "Udlånt",
   status: "unavailable",
+  button: true,
 };
 
 export const WithoutManifestationType = Template.bind({});
@@ -58,4 +69,5 @@ WithoutManifestationType.args = {
   manifestationType: undefined,
   availability: "Udlånt",
   status: "unavailable",
+  button: true,
 };
diff --git a/src/stories/Library/availability-label/AvailabilityLabel.tsx b/src/stories/Library/availability-label/AvailabilityLabel.tsx
index 31d8a1bdc..c8ab21035 100644
--- a/src/stories/Library/availability-label/AvailabilityLabel.tsx
+++ b/src/stories/Library/availability-label/AvailabilityLabel.tsx
@@ -7,15 +7,16 @@ const AvailabilityLabel: React.FC<AvailabilityLabelPropsType> = ({
   availability,
   status,
   quantity,
+  button,
 }) => {
   const AvailabilityPagefold = withAvailabilityProps(Pagefold);
 
   return (
-    <AvailabilityPagefold status={status}>
+    <AvailabilityPagefold status={status} button={button}>
       <img
         className={`availability-label__check ${status}`}
         src="icons/collection/Check.svg"
-        alt="check-icon"
+        alt=""
       />
       {manifestationType && (
         <>
diff --git a/src/stories/Library/material-header/MaterialHeader.tsx b/src/stories/Library/material-header/MaterialHeader.tsx
index 289e9c72c..b93ccc372 100644
--- a/src/stories/Library/material-header/MaterialHeader.tsx
+++ b/src/stories/Library/material-header/MaterialHeader.tsx
@@ -11,26 +11,31 @@ const listOfAvailabilityLabels = [
     manifestationType: "Bog",
     availability: "Hjemme",
     status: "selected",
+    button: true,
   } as const,
   {
     manifestationType: "Bog",
     availability: "Hjemme",
     status: "available",
+    button: true,
   } as const,
   {
     manifestationType: "Bog",
     availability: "Hjemme",
     status: "available",
+    button: true,
   } as const,
   {
     manifestationType: "Bog",
     availability: "Hjemme",
     status: "available",
+    button: true,
   } as const,
   {
     manifestationType: "Bog",
     availability: "Hjemme",
     status: "available",
+    button: true,
   } as const,
 ].map((item, index) => <AvailabilityLabel {...item} key={generateId(index)} />);
 
diff --git a/src/stories/Library/pagefold/Pagefold.tsx b/src/stories/Library/pagefold/Pagefold.tsx
index 6f2967fc3..b5a591deb 100644
--- a/src/stories/Library/pagefold/Pagefold.tsx
+++ b/src/stories/Library/pagefold/Pagefold.tsx
@@ -8,19 +8,21 @@ export type PagefoldProps = {
   children?: React.ReactNode;
   className?: string;
   compProps?: React.ComponentPropsWithoutRef<"div">;
+  status?: "selected" | "available" | "unavailable";
+  button?: boolean;
 };
 
-export const Pagefold: React.FC<PagefoldProps> = (props) => {
-  const {
-    isInheriting,
-    isAContainer,
-    size,
-    type,
-    children,
-    className,
-    compProps,
-  } = props;
-
+export const Pagefold: React.FC<PagefoldProps> = ({
+  isInheriting,
+  isAContainer,
+  size,
+  type,
+  children,
+  className,
+  compProps,
+  status,
+  button,
+}) => {
   const baseClass = `pagefold-triangle--${size}`;
 
   const classes = {
@@ -36,10 +38,30 @@ export const Pagefold: React.FC<PagefoldProps> = (props) => {
     ),
   };
 
-  return (
+  if (button) {
+    return (
+      <button
+        type="button"
+        aria-pressed={status === "selected"}
+        className={classes.wrapper}
+      >
+        <div className={classes.triangle} />
+        {children}
+      </button>
+    );
+  }
+
+  if (compProps) {
     <div className={classes.wrapper} {...compProps}>
       <div className={classes.triangle} />
       {children}
-    </div>
+    </div>;
+  }
+
+  return (
+    <a className={classes.wrapper}>
+      <div className={classes.triangle} />
+      {children}
+    </a>
   );
 };
diff --git a/src/stories/availability-label/types.tsx b/src/stories/availability-label/types.tsx
index c902d765c..877a8040c 100644
--- a/src/stories/availability-label/types.tsx
+++ b/src/stories/availability-label/types.tsx
@@ -3,4 +3,5 @@ export type AvailabilityLabelPropsType = {
   availability: "Hjemme" | "Online" | "Udlånt";
   status: "available" | "unavailable" | "selected";
   quantity?: number;
+  button?: boolean;
 };