From f21f9c42425481edcb3857b720abbc5b7b1e1669 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Fri, 21 Aug 2026 21:03:08 +0200
Subject: [PATCH] feat(buttons): add ToggleButton component

Keep toggle styling and the accessible pressed state coupled in one reusable button.
---
 .../common/components/buttons/ToggleButton.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 apps/client/src/common/components/buttons/ToggleButton.tsx

diff --git a/apps/client/src/common/components/buttons/ToggleButton.tsx b/apps/client/src/common/components/buttons/ToggleButton.tsx
new file mode 100644
index 000000000..02678ad6e
--- /dev/null
+++ b/apps/client/src/common/components/buttons/ToggleButton.tsx
@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+
+import Button from './Button';
+
+type ToggleButtonProps = Omit<ComponentProps<typeof Button>, 'variant'> & {
+  /** whether the option this button controls is currently on */
+  pressed: boolean;
+};
+
+/**
+ * A button which carries an on / off state.
+ *
+ * Keeps the pressed styling and the accessible state together, so that a toggle
+ * cannot end up looking active without also announcing that it is.
+ */
+export default function ToggleButton({ pressed, ...buttonProps }: ToggleButtonProps) {
+  return <Button variant={pressed ? 'primary' : 'subtle'} aria-pressed={pressed} {...buttonProps} />;
+}