diff --git a/resources/js/canvas/environment/Panel.svelte b/resources/js/canvas/environment/Panel.svelte
index b4fd9c549c..b0a1146df1 100644
--- a/resources/js/canvas/environment/Panel.svelte
+++ b/resources/js/canvas/environment/Panel.svelte
@@ -54,7 +54,7 @@
 
   const rowButton = 'flex min-w-0 flex-1 items-center gap-2 rounded-md px-1.5 py-1 text-left text-[12px] transition-colors hover:bg-neutral-100 dark:hover:bg-white/[0.06]';
   const listButton = 'flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-[12px] transition-colors hover:bg-neutral-100 dark:hover:bg-white/[0.06]';
-  const smallButton = danger => `button h-6! shrink-0 px-2! text-[11px]! ${danger ? 'text-red-600! dark:text-red-400!' : ''}`;
+  const smallButton = danger => `button h-6! shrink-0 px-2! text-[11px]! ${danger ? 'button-error' : ''}`;
   const faint = 'text-[12px] text-neutral-400 dark:text-fg-faint';
   const statusPill = 'inline-flex h-6 items-center gap-1.5 rounded-full border border-neutral-200 bg-neutral-100 px-2 text-xs font-medium text-neutral-700 dark:border-white/[0.12] dark:bg-white/[0.07] dark:text-white';
   const titleLink = '[&[href]]:cursor-pointer [&[href]]:underline-offset-2 [&[href]]:hover:underline';
@@ -205,7 +205,7 @@
     {#if canEdit && !link.removable}{@render note(removeHint(link))}{/if}
   {/snippet}
   {#snippet footer()}
-    <button type="button" class="button w-full text-red-600! dark:text-red-400!" title={link.removable ? removeTitle(link) : removeHint(link)} disabled={!link.removable || busy[link.id]} onclick={() => run(link.id, () => onremove(link))}>Remove</button>
+    <button type="button" class="button button-error w-full" title={link.removable ? removeTitle(link) : removeHint(link)} disabled={!link.removable || busy[link.id]} onclick={() => run(link.id, () => onremove(link))}>Remove</button>
   {/snippet}
   {@render shell(`${variable?.name || text.source} → ${resource?.name || 'Resource'}`, 'link', body, canEdit ? footer : null)}
 {:else if node}
@@ -310,7 +310,7 @@
     {@render note('Links are for the diagram only. They do not change your resources.')}
   {/snippet}
   {#snippet footer()}
-    <button type="button" class="button w-full text-red-600! dark:text-red-400!" disabled={busy[link.id]} onclick={() => run(link.id, () => ondelete(link))}>Remove link</button>
+    <button type="button" class="button button-error w-full" disabled={busy[link.id]} onclick={() => run(link.id, () => ondelete(link))}>Remove link</button>
   {/snippet}
   {@render shell(link.label || 'Link', 'link', body, canEdit ? footer : null)}
 {/if}