From bc952ebde914e9dfd9ab4d88f4b994388ac90bef Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 3 Sep 2025 14:34:29 +0200
Subject: [PATCH] Add new plain (text-only) button variant (#36002)

---
 .../components/button/button.stories.tsx      | 17 +++++++++
 .../mastodon/components/button/index.tsx      |  3 ++
 .../styles/mastodon/components.scss           | 35 +++++++++++++++++++
 3 files changed, 55 insertions(+)

diff --git a/app/javascript/mastodon/components/button/button.stories.tsx b/app/javascript/mastodon/components/button/button.stories.tsx
index 4bcb9edbb88..6827097c50e 100644
--- a/app/javascript/mastodon/components/button/button.stories.tsx
+++ b/app/javascript/mastodon/components/button/button.stories.tsx
@@ -8,6 +8,7 @@ const meta = {
   component: Button,
   args: {
     secondary: false,
+    plain: false,
     compact: false,
     dangerous: false,
     disabled: false,
@@ -57,6 +58,14 @@ export const Secondary: Story = {
   play: buttonTest,
 };
 
+export const Plain: Story = {
+  args: {
+    plain: true,
+    children: 'Plain button',
+  },
+  play: buttonTest,
+};
+
 export const Compact: Story = {
   args: {
     compact: true,
@@ -101,6 +110,14 @@ export const SecondaryDisabled: Story = {
   play: disabledButtonTest,
 };
 
+export const PlainDisabled: Story = {
+  args: {
+    ...Plain.args,
+    disabled: true,
+  },
+  play: disabledButtonTest,
+};
+
 const loadingButtonTest: Story['play'] = async ({
   args,
   canvas,
diff --git a/app/javascript/mastodon/components/button/index.tsx b/app/javascript/mastodon/components/button/index.tsx
index 6d2a37cf85f..f940c07d056 100644
--- a/app/javascript/mastodon/components/button/index.tsx
+++ b/app/javascript/mastodon/components/button/index.tsx
@@ -9,6 +9,7 @@ interface BaseProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   block?: boolean;
   secondary?: boolean;
+  plain?: boolean;
   compact?: boolean;
   dangerous?: boolean;
   loading?: boolean;
@@ -35,6 +36,7 @@ export const Button: React.FC<Props> = ({
   disabled,
   block,
   secondary,
+  plain,
   compact,
   dangerous,
   loading,
@@ -62,6 +64,7 @@ export const Button: React.FC<Props> = ({
     <button
       className={classNames('button', className, {
         'button-secondary': secondary,
+        'button--plain': plain,
         'button--compact': compact,
         'button--block': block,
         'button--dangerous': dangerous,
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index ef08d6b7517..80f8e5cb02a 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -201,6 +201,41 @@
     }
   }
 
+  &.button--plain {
+    color: $highlight-text-color;
+    background: transparent;
+    padding: 6px;
+
+    // The button has no outline, so we use negative margin to
+    // visually align its label with its surroundings while maintaining
+    // a generous click target
+    margin-inline: -6px;
+    border: 1px solid transparent;
+
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: transparent;
+      color: lighten($highlight-text-color, 4%);
+      background-color: transparent;
+      text-decoration: none;
+    }
+
+    &:disabled,
+    &.disabled {
+      opacity: 0.7;
+      border-color: transparent;
+      color: $ui-button-disabled-color;
+
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: transparent;
+        color: $ui-button-disabled-color;
+      }
+    }
+  }
+
   &.button-tertiary {
     background: transparent;
     padding: 6px 17px;