From fb006a9ecfb8639970b2b1e592b917460604c532 Mon Sep 17 00:00:00 2001
From: rebecca shoptaw <rebecca@rebeccashoptaw.dev>
Date: Wed, 3 Jun 2026 14:09:03 -0400
Subject: [PATCH 1/5] Draft link-that-looks-like-button implementation

---
 src/elements/ia-button/ia-button-story.ts |  6 ++
 src/elements/ia-button/ia-button.test.ts  | 36 ++++++++++-
 src/elements/ia-button/ia-button.ts       | 73 ++++++++++++++++-------
 3 files changed, 91 insertions(+), 24 deletions(-)

diff --git a/src/elements/ia-button/ia-button-story.ts b/src/elements/ia-button/ia-button-story.ts
index 35da5e2..c6c39ca 100644
--- a/src/elements/ia-button/ia-button-story.ts
+++ b/src/elements/ia-button/ia-button-story.ts
@@ -53,6 +53,12 @@ const propInputSettings: PropInputSettings<IAButton>[] = [
     inputType: 'radio',
     radioOptions: ['button', 'submit', 'reset'],
   },
+  {
+    label: 'Link to attach to button',
+    propertyName: 'href',
+    defaultValue: '',
+    inputType: 'text',
+  },
 ];
 
 const styleInputSettings: StyleInputSettings[] = [
diff --git a/src/elements/ia-button/ia-button.test.ts b/src/elements/ia-button/ia-button.test.ts
index 46fb5e9..6ba5d71 100644
--- a/src/elements/ia-button/ia-button.test.ts
+++ b/src/elements/ia-button/ia-button.test.ts
@@ -6,7 +6,7 @@ import { IAButton } from './ia-button';
 import './ia-button';
 
 describe('IA button', () => {
-  test('renders a basic button', async () => {
+  test('renders a basic button by default', async () => {
     const el = await fixture<IAButton>(html`<ia-button>Submit</ia-button>`);
 
     const button = el.shadowRoot?.querySelector('button');
@@ -14,6 +14,40 @@ describe('IA button', () => {
     expect(button?.disabled).to.equal(false);
   });
 
+  test('renders a link instead of a button if href provided', async () => {
+    const el = await fixture<IAButton>(
+      html`<ia-button href="https://archive.org/foo">Submit</ia-button>`,
+    );
+
+    const button = el.shadowRoot?.querySelector('button');
+    const link = el.shadowRoot?.querySelector('a');
+    expect(button).not.to.exist;
+    expect(link).to.exist;
+    expect(link?.href).to.equal('https://archive.org/foo');
+  });
+
+  test('does not add the disabled class to the link by default', async () => {
+    const el = await fixture<IAButton>(
+      html`<ia-button href="https://archive.org/foo">Submit</ia-button>`,
+    );
+
+    const link = el.shadowRoot?.querySelector('a');
+    expect(link).to.exist;
+    expect(link?.classList.contains('disabled')).to.be.false;
+  });
+
+  test('adds the disabled class to the link if the component is disabled', async () => {
+    const el = await fixture<IAButton>(
+      html`<ia-button href="https://archive.org/foo" .disabled=${true}
+        >Submit</ia-button
+      >`,
+    );
+
+    const link = el.shadowRoot?.querySelector('a');
+    expect(link).to.exist;
+    expect(link?.classList.contains('disabled')).to.be.true;
+  });
+
   test('displays slotted text within button', async () => {
     const el = await fixture<IAButton>(
       html`<ia-button><span class="foo">Submit</span></ia-button>`,
diff --git a/src/elements/ia-button/ia-button.ts b/src/elements/ia-button/ia-button.ts
index 80d8f67..26189f1 100644
--- a/src/elements/ia-button/ia-button.ts
+++ b/src/elements/ia-button/ia-button.ts
@@ -52,15 +52,32 @@ export class IAButton extends LitElement {
     | 'submit'
     | 'reset' = 'button';
 
+  /* An optional href to use. If provided, the button will be rendered as an a element instead of a button */
+  @property({ type: String }) href?: string;
+
   render(): TemplateResult {
     return html`
-      <button
-        part="button"
-        class=${this.mode}
-        ?disabled=${this.loading || this.disabled}
-      >
-        ${this.loading ? this.loadingStateTemplate : html`<slot></slot>`}
-      </button>
+      ${this.href
+        ? html`
+            <a
+              part="button"
+              href=${this.href}
+              class=${'ia-button ' +
+              this.mode +
+              (this.isDisabled ? ' disabled' : '')}
+            >
+              ${this.buttonTextTemplate}
+            </a>
+          `
+        : html`
+            <button
+              part="button"
+              class=${'ia-button ' + this.mode}
+              ?disabled=${this.isDisabled}
+            >
+              ${this.buttonTextTemplate}
+            </button>
+          `}
       <slot name="hidden-button"></slot>
     `;
   }
@@ -71,6 +88,11 @@ export class IAButton extends LitElement {
     }
   }
 
+  /* The text to render within the button */
+  private get buttonTextTemplate(): TemplateResult {
+    return this.loading ? this.loadingStateTemplate : html`<slot></slot>`;
+  }
+
   /* Content to render while button is loading */
   private get loadingStateTemplate(): TemplateResult {
     return html`
@@ -82,6 +104,11 @@ export class IAButton extends LitElement {
     `;
   }
 
+  /* Whether the button should be disabled */
+  private get isDisabled(): boolean {
+    return this.disabled || this.loading;
+  }
+
   /** Sets up or removes button type emulation as needed */
   private setButtonTypeEmulation(): void {
     const hiddenButton: HTMLInputElement | null = this.querySelector(
@@ -233,7 +260,7 @@ export class IAButton extends LitElement {
           display: inline-block; /* keeps host sized to button */
         }
 
-        button {
+        .ia-button {
           font-family: var(--base-font-family--);
           font-size: var(--font-size-standard--);
           height: var(--button-height--);
@@ -265,7 +292,7 @@ export class IAButton extends LitElement {
         }
 
         button:disabled,
-        button.disabled {
+        .ia-button.disabled {
           cursor: not-allowed;
           color: var(--disabled-cta-text-color--);
           background-color: var(--disabled-cta-fill--);
@@ -286,61 +313,61 @@ export class IAButton extends LitElement {
           opacity: 0.7;
         }
 
-        button.primary {
+        .ia-button.primary {
           color: var(--primary-cta-text-color--);
           background-color: var(--primary-cta-fill--);
           border-color: var(--primary-cta-border--);
         }
 
-        button.secondary {
+        .ia-button.secondary {
           color: var(--secondary-cta-text-color--);
           background-color: var(--secondary-cta-fill--);
           border-color: var(--secondary-cta-border--);
         }
 
-        button.danger {
+        .ia-button.danger {
           color: var(--danger-cta-text-color--);
           background-color: var(--danger-cta-fill--);
           border-color: var(--danger-cta-border--);
         }
 
-        button.warning {
+        .ia-button.warning {
           color: var(--warning-cta-text-color--);
           background-color: var(--warning-cta-fill--);
           border-color: var(--warning-cta-border--);
         }
 
-        button.transparent {
+        .ia-button.transparent {
           color: inherit;
           border-width: 0;
           background-color: transparent;
           border-color: transparent;
         }
 
-        button.custom {
+        .ia-button.custom {
           color: var(--ia-button-custom-text-color--);
           background-color: var(--ia-button-custom-fill--);
           border-color: var(--ia-button-custom-border--);
         }
 
-        button.custom:enabled:is(:hover, :focus, :active) {
+        .ia-button.custom:enabled:is(:hover, :focus, :active) {
           color: var(--ia-button-custom-active-text-color--);
           background-color: var(--ia-button-custom-active-fill--);
           border-color: var(--ia-button-custom-active-border--);
         }
 
-        :host(.fit-content) button {
+        :host(.fit-content) .ia-button {
           padding: 0;
           height: fit-content;
         }
 
-        button.link:enabled:hover,
-        button.danger-link:enabled:hover {
+        .ia-button.link:enabled:hover,
+        .ia-button.danger-link:enabled:hover {
           text-decoration: underline;
         }
 
-        button.link,
-        button.danger-link {
+        .ia-button.link,
+        .ia-button.danger-link {
           margin: 0;
           border: 0;
           appearance: none;
@@ -350,11 +377,11 @@ export class IAButton extends LitElement {
           padding: 0;
         }
 
-        button.link {
+        .ia-button.link {
           color: var(--link-color--);
         }
 
-        button.danger-link {
+        .ia-button.danger-link {
           color: var(--color-danger--);
         }
 

From baaef184095a3cdd8375d47ac42ab5bf96bd8157 Mon Sep 17 00:00:00 2001
From: rebecca shoptaw <rebecca@rebeccashoptaw.dev>
Date: Wed, 3 Jun 2026 14:12:18 -0400
Subject: [PATCH 2/5] Try a different approach

---
 src/elements/ia-button/ia-button.test.ts | 26 +-----------------
 src/elements/ia-button/ia-button.ts      | 35 ++++++++++--------------
 2 files changed, 16 insertions(+), 45 deletions(-)

diff --git a/src/elements/ia-button/ia-button.test.ts b/src/elements/ia-button/ia-button.test.ts
index 6ba5d71..33eb4c6 100644
--- a/src/elements/ia-button/ia-button.test.ts
+++ b/src/elements/ia-button/ia-button.test.ts
@@ -14,40 +14,16 @@ describe('IA button', () => {
     expect(button?.disabled).to.equal(false);
   });
 
-  test('renders a link instead of a button if href provided', async () => {
+  test('renders a link around the button if href provided', async () => {
     const el = await fixture<IAButton>(
       html`<ia-button href="https://archive.org/foo">Submit</ia-button>`,
     );
 
-    const button = el.shadowRoot?.querySelector('button');
     const link = el.shadowRoot?.querySelector('a');
-    expect(button).not.to.exist;
     expect(link).to.exist;
     expect(link?.href).to.equal('https://archive.org/foo');
   });
 
-  test('does not add the disabled class to the link by default', async () => {
-    const el = await fixture<IAButton>(
-      html`<ia-button href="https://archive.org/foo">Submit</ia-button>`,
-    );
-
-    const link = el.shadowRoot?.querySelector('a');
-    expect(link).to.exist;
-    expect(link?.classList.contains('disabled')).to.be.false;
-  });
-
-  test('adds the disabled class to the link if the component is disabled', async () => {
-    const el = await fixture<IAButton>(
-      html`<ia-button href="https://archive.org/foo" .disabled=${true}
-        >Submit</ia-button
-      >`,
-    );
-
-    const link = el.shadowRoot?.querySelector('a');
-    expect(link).to.exist;
-    expect(link?.classList.contains('disabled')).to.be.true;
-  });
-
   test('displays slotted text within button', async () => {
     const el = await fixture<IAButton>(
       html`<ia-button><span class="foo">Submit</span></ia-button>`,
diff --git a/src/elements/ia-button/ia-button.ts b/src/elements/ia-button/ia-button.ts
index 26189f1..4cb3f12 100644
--- a/src/elements/ia-button/ia-button.ts
+++ b/src/elements/ia-button/ia-button.ts
@@ -58,26 +58,8 @@ export class IAButton extends LitElement {
   render(): TemplateResult {
     return html`
       ${this.href
-        ? html`
-            <a
-              part="button"
-              href=${this.href}
-              class=${'ia-button ' +
-              this.mode +
-              (this.isDisabled ? ' disabled' : '')}
-            >
-              ${this.buttonTextTemplate}
-            </a>
-          `
-        : html`
-            <button
-              part="button"
-              class=${'ia-button ' + this.mode}
-              ?disabled=${this.isDisabled}
-            >
-              ${this.buttonTextTemplate}
-            </button>
-          `}
+        ? html`<a href=${this.href}>${this.buttonTemplate}</a>`
+        : this.buttonTemplate}
       <slot name="hidden-button"></slot>
     `;
   }
@@ -88,6 +70,19 @@ export class IAButton extends LitElement {
     }
   }
 
+  /* The native button to render */
+  private get buttonTemplate(): TemplateResult {
+    return html`
+      <button
+        part="button"
+        class=${'ia-button ' + this.mode}
+        ?disabled=${this.isDisabled}
+      >
+        ${this.buttonTextTemplate}
+      </button>
+    `;
+  }
+
   /* The text to render within the button */
   private get buttonTextTemplate(): TemplateResult {
     return this.loading ? this.loadingStateTemplate : html`<slot></slot>`;

From 5ba7a17482dad36dea989858ac107007451bdc12 Mon Sep 17 00:00:00 2001
From: rebecca shoptaw <rebecca@rebeccashoptaw.dev>
Date: Wed, 3 Jun 2026 14:15:52 -0400
Subject: [PATCH 3/5] Tidy up new approach

---
 src/elements/ia-button/ia-button.ts | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/elements/ia-button/ia-button.ts b/src/elements/ia-button/ia-button.ts
index 4cb3f12..695e1da 100644
--- a/src/elements/ia-button/ia-button.ts
+++ b/src/elements/ia-button/ia-button.ts
@@ -76,7 +76,7 @@ export class IAButton extends LitElement {
       <button
         part="button"
         class=${'ia-button ' + this.mode}
-        ?disabled=${this.isDisabled}
+        ?disabled=${this.disabled || this.loading}
       >
         ${this.buttonTextTemplate}
       </button>
@@ -99,11 +99,6 @@ export class IAButton extends LitElement {
     `;
   }
 
-  /* Whether the button should be disabled */
-  private get isDisabled(): boolean {
-    return this.disabled || this.loading;
-  }
-
   /** Sets up or removes button type emulation as needed */
   private setButtonTypeEmulation(): void {
     const hiddenButton: HTMLInputElement | null = this.querySelector(
@@ -286,7 +281,7 @@ export class IAButton extends LitElement {
           -o-user-select: none;
         }
 
-        button:disabled,
+        .ia-button:disabled,
         .ia-button.disabled {
           cursor: not-allowed;
           color: var(--disabled-cta-text-color--);
@@ -295,16 +290,16 @@ export class IAButton extends LitElement {
           opacity: 0.5;
         }
 
-        button:enabled:hover {
+        .ia-button:enabled:hover {
           opacity: 0.9;
         }
 
-        button:focus-visible {
+        .ia-button:focus-visible {
           opacity: 0.8;
           outline-style: double;
         }
 
-        button:active {
+        .ia-button:active {
           opacity: 0.7;
         }
 

From c99a4daf4c6abc79b0bce4eef36d1db0b5e67e80 Mon Sep 17 00:00:00 2001
From: rebecca shoptaw <rebecca@rebeccashoptaw.dev>
Date: Wed, 3 Jun 2026 14:20:17 -0400
Subject: [PATCH 4/5] Switch back from .ia-button for new implementation

---
 src/elements/ia-button/ia-button.ts | 48 ++++++++++++++++-------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/elements/ia-button/ia-button.ts b/src/elements/ia-button/ia-button.ts
index 695e1da..b78d332 100644
--- a/src/elements/ia-button/ia-button.ts
+++ b/src/elements/ia-button/ia-button.ts
@@ -52,7 +52,7 @@ export class IAButton extends LitElement {
     | 'submit'
     | 'reset' = 'button';
 
-  /* An optional href to use. If provided, the button will be rendered as an a element instead of a button */
+  /* An optional href to wrap around the button */
   @property({ type: String }) href?: string;
 
   render(): TemplateResult {
@@ -75,7 +75,7 @@ export class IAButton extends LitElement {
     return html`
       <button
         part="button"
-        class=${'ia-button ' + this.mode}
+        class=${this.mode}
         ?disabled=${this.disabled || this.loading}
       >
         ${this.buttonTextTemplate}
@@ -250,7 +250,7 @@ export class IAButton extends LitElement {
           display: inline-block; /* keeps host sized to button */
         }
 
-        .ia-button {
+        button {
           font-family: var(--base-font-family--);
           font-size: var(--font-size-standard--);
           height: var(--button-height--);
@@ -281,8 +281,12 @@ export class IAButton extends LitElement {
           -o-user-select: none;
         }
 
-        .ia-button:disabled,
-        .ia-button.disabled {
+        a {
+          text-decoration: none;
+        }
+
+        button:disabled,
+        button.disabled {
           cursor: not-allowed;
           color: var(--disabled-cta-text-color--);
           background-color: var(--disabled-cta-fill--);
@@ -290,74 +294,74 @@ export class IAButton extends LitElement {
           opacity: 0.5;
         }
 
-        .ia-button:enabled:hover {
+        button:enabled:hover {
           opacity: 0.9;
         }
 
-        .ia-button:focus-visible {
+        button:focus-visible {
           opacity: 0.8;
           outline-style: double;
         }
 
-        .ia-button:active {
+        button:active {
           opacity: 0.7;
         }
 
-        .ia-button.primary {
+        button.primary {
           color: var(--primary-cta-text-color--);
           background-color: var(--primary-cta-fill--);
           border-color: var(--primary-cta-border--);
         }
 
-        .ia-button.secondary {
+        button.secondary {
           color: var(--secondary-cta-text-color--);
           background-color: var(--secondary-cta-fill--);
           border-color: var(--secondary-cta-border--);
         }
 
-        .ia-button.danger {
+        button.danger {
           color: var(--danger-cta-text-color--);
           background-color: var(--danger-cta-fill--);
           border-color: var(--danger-cta-border--);
         }
 
-        .ia-button.warning {
+        button.warning {
           color: var(--warning-cta-text-color--);
           background-color: var(--warning-cta-fill--);
           border-color: var(--warning-cta-border--);
         }
 
-        .ia-button.transparent {
+        button.transparent {
           color: inherit;
           border-width: 0;
           background-color: transparent;
           border-color: transparent;
         }
 
-        .ia-button.custom {
+        button.custom {
           color: var(--ia-button-custom-text-color--);
           background-color: var(--ia-button-custom-fill--);
           border-color: var(--ia-button-custom-border--);
         }
 
-        .ia-button.custom:enabled:is(:hover, :focus, :active) {
+        button.custom:enabled:is(:hover, :focus, :active) {
           color: var(--ia-button-custom-active-text-color--);
           background-color: var(--ia-button-custom-active-fill--);
           border-color: var(--ia-button-custom-active-border--);
         }
 
-        :host(.fit-content) .ia-button {
+        :host(.fit-content) button {
           padding: 0;
           height: fit-content;
         }
 
-        .ia-button.link:enabled:hover,
-        .ia-button.danger-link:enabled:hover {
+        button.link:enabled:hover,
+        button.danger-link:enabled:hover {
           text-decoration: underline;
         }
 
-        .ia-button.link,
-        .ia-button.danger-link {
+        button.link,
+        button.danger-link {
           margin: 0;
           border: 0;
           appearance: none;
@@ -367,11 +371,11 @@ export class IAButton extends LitElement {
           padding: 0;
         }
 
-        .ia-button.link {
+        button.link {
           color: var(--link-color--);
         }
 
-        .ia-button.danger-link {
+        button.danger-link {
           color: var(--color-danger--);
         }
 

From 357837ebbabd08cbbb0f8eae1fdc35fbbeb9d332 Mon Sep 17 00:00:00 2001
From: rebecca shoptaw <rebecca@rebeccashoptaw.dev>
Date: Thu, 4 Jun 2026 11:17:45 -0400
Subject: [PATCH 5/5] Add new tab option for link buttons

---
 src/elements/ia-button/ia-button-story.ts |  7 +++++++
 src/elements/ia-button/ia-button.test.ts  | 24 ++++++++++++++++++++++-
 src/elements/ia-button/ia-button.ts       |  9 ++++++++-
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/elements/ia-button/ia-button-story.ts b/src/elements/ia-button/ia-button-story.ts
index c6c39ca..e5f8c10 100644
--- a/src/elements/ia-button/ia-button-story.ts
+++ b/src/elements/ia-button/ia-button-story.ts
@@ -59,6 +59,13 @@ const propInputSettings: PropInputSettings<IAButton>[] = [
     defaultValue: '',
     inputType: 'text',
   },
+  {
+    label: 'Open link in new tab',
+    propertyName: 'openLinksNewTab',
+    defaultValue: false,
+    inputType: 'radio',
+    radioOptions: [true, false],
+  },
 ];
 
 const styleInputSettings: StyleInputSettings[] = [
diff --git a/src/elements/ia-button/ia-button.test.ts b/src/elements/ia-button/ia-button.test.ts
index 33eb4c6..1d25867 100644
--- a/src/elements/ia-button/ia-button.test.ts
+++ b/src/elements/ia-button/ia-button.test.ts
@@ -16,7 +16,7 @@ describe('IA button', () => {
 
   test('renders a link around the button if href provided', async () => {
     const el = await fixture<IAButton>(
-      html`<ia-button href="https://archive.org/foo">Submit</ia-button>`,
+      html`<ia-button href="https://archive.org/foo">Go</ia-button>`,
     );
 
     const link = el.shadowRoot?.querySelector('a');
@@ -24,6 +24,28 @@ describe('IA button', () => {
     expect(link?.href).to.equal('https://archive.org/foo');
   });
 
+  test('includes a target="_blank" if requested', async () => {
+    const el = await fixture<IAButton>(
+      html`<ia-button href="https://archive.org/foo" .openLinksNewTab=${true}>
+        Go
+      </ia-button>`,
+    );
+
+    const link = el.shadowRoot?.querySelector('a');
+    expect(link).to.exist;
+    expect(link?.target).to.equal('_blank');
+  });
+
+  test('uses target="_self" for links by default', async () => {
+    const el = await fixture<IAButton>(
+      html`<ia-button href="https://archive.org/foo">Go</ia-button>`,
+    );
+
+    const link = el.shadowRoot?.querySelector('a');
+    expect(link).to.exist;
+    expect(link?.target).to.equal('_self');
+  });
+
   test('displays slotted text within button', async () => {
     const el = await fixture<IAButton>(
       html`<ia-button><span class="foo">Submit</span></ia-button>`,
diff --git a/src/elements/ia-button/ia-button.ts b/src/elements/ia-button/ia-button.ts
index b78d332..c450e16 100644
--- a/src/elements/ia-button/ia-button.ts
+++ b/src/elements/ia-button/ia-button.ts
@@ -55,10 +55,17 @@ export class IAButton extends LitElement {
   /* An optional href to wrap around the button */
   @property({ type: String }) href?: string;
 
+  /* Whether to add a target="_blank" to any wrapping link */
+  @property({ type: Boolean }) openLinksNewTab: boolean = false;
+
   render(): TemplateResult {
     return html`
       ${this.href
-        ? html`<a href=${this.href}>${this.buttonTemplate}</a>`
+        ? html`<a
+            href=${this.href}
+            target=${this.openLinksNewTab ? '_blank' : '_self'}
+            >${this.buttonTemplate}</a
+          >`
         : this.buttonTemplate}
       <slot name="hidden-button"></slot>
     `;