diff --git a/frontend/src/components/datepicker.svelte b/frontend/src/components/datepicker.svelte
index 879cfdd..0cde0f1 100644
--- a/frontend/src/components/datepicker.svelte
+++ b/frontend/src/components/datepicker.svelte
@@ -112,7 +112,7 @@
                 <button
                   on:click={() => setValueToDate(day)}
                   type="button"
-                  class="btn-sm"
+                  class="button-small"
                   class:active={isSameDay(value, day)}
                   class:notinmonth={day.getMonth() !== month}
                 >{day.getDate()}</button>
diff --git a/frontend/src/components/forminput.svelte b/frontend/src/components/forminput.svelte
index 48f2ff2..a3f7193 100644
--- a/frontend/src/components/forminput.svelte
+++ b/frontend/src/components/forminput.svelte
@@ -94,22 +94,22 @@
   <div class="actions">
     {#if type === 'objectid'}
       {#if objectIdInput?.disabled}
-        <button class="btn-sm" type="button" title="Edit object id" on:click={editObjectId}>
+        <button class="button-small" type="button" title="Edit object id" on:click={editObjectId}>
           <Icon name="edit" />
         </button>
       {/if}
-      <button class="btn-sm" type="button" title="Generate random object id" on:click={generateObjectId}>
+      <button class="button-small" type="button" title="Generate random object id" on:click={generateObjectId}>
         <Icon name="reload" />
       </button>
     {:else if type === 'date'}
-      <button class="btn-sm" type="button" title="Edit date" on:click={() => showDatepicker = true}>
+      <button class="button-small" type="button" title="Edit date" on:click={() => showDatepicker = true}>
         <Icon name="edit" />
       </button>
-      <button class="btn-sm" type="button" title="Set date to now" on:click={() => value = new Date()}>
+      <button class="button-small" type="button" title="Set date to now" on:click={() => value = new Date()}>
         <Icon name="o" />
       </button>
     {/if}
-    <button class="btn-sm" type="button" title="Reset field to default value" on:click={() => value = undefined}>
+    <button class="button-small" type="button" title="Reset field to default value" on:click={() => value = undefined}>
       <Icon name="trash" />
     </button>
   </div>
diff --git a/frontend/src/components/grid-items.svelte b/frontend/src/components/grid-items.svelte
index 06760eb..1cbe8f2 100644
--- a/frontend/src/components/grid-items.svelte
+++ b/frontend/src/components/grid-items.svelte
@@ -173,7 +173,7 @@
 
     {#if canRemoveItems}
       <td class="has-button">
-        <button class="btn-sm" type="button" on:click|stopPropagation={() => removeItem(index, item[key])} on:dblclick|stopPropagation>
+        <button class="button-small" type="button" on:click|stopPropagation={() => removeItem(index, item[key])} on:dblclick|stopPropagation>
           <Icon name="x" />
         </button>
       </td>
diff --git a/frontend/src/components/tabbar.svelte b/frontend/src/components/tabbar.svelte
index efdec28..19a6ea5 100644
--- a/frontend/src/components/tabbar.svelte
+++ b/frontend/src/components/tabbar.svelte
@@ -23,7 +23,7 @@
           {tab.title}
         </button>
         {#if tab.closable}
-          <button class="btn-sm" on:click={() => dispatch('closeTab', tab.key)}>
+          <button class="button-small" on:click={() => dispatch('closeTab', tab.key)}>
             <Icon name="x" />
           </button>
         {/if}
@@ -89,7 +89,7 @@
     cursor: not-allowed;
   }
 
-  .btn-sm {
+  .button-small {
     position: absolute;
     right: 7px;
     top: 7px;
diff --git a/frontend/src/organisms/connection/collection/aggregate.svelte b/frontend/src/organisms/connection/collection/aggregate.svelte
index 044af8d..e23cdb4 100644
--- a/frontend/src/organisms/connection/collection/aggregate.svelte
+++ b/frontend/src/organisms/connection/collection/aggregate.svelte
@@ -83,7 +83,7 @@
       </Details>
     {/each}
 
-    <button class="btn-sm" type="button" on:click={addStage}>
+    <button class="button-small" type="button" on:click={addStage}>
       <Icon name="+" /> Add stage
     </button>
   </div>
diff --git a/frontend/src/organisms/connection/collection/insert.svelte b/frontend/src/organisms/connection/collection/insert.svelte
index 6030104..c9086c8 100644
--- a/frontend/src/organisms/connection/collection/insert.svelte
+++ b/frontend/src/organisms/connection/collection/insert.svelte
@@ -162,7 +162,7 @@
     {/if}
 
     {#if collection.viewKey !== 'list'}
-      <button class="btn-sm" type="button" on:click={addRow}>
+      <button class="button-small" type="button" on:click={addRow}>
         <Icon name="+" /> Add item
       </button>
     {/if}
diff --git a/frontend/src/styles/style.css b/frontend/src/styles/style.css
index 7f53835..0de986f 100644
--- a/frontend/src/styles/style.css
+++ b/frontend/src/styles/style.css
@@ -100,17 +100,17 @@ select:disabled {
   cursor: not-allowed;
 }
 
-.btn-sm {
+.button-small {
   padding: 3px;
   border-radius: 2px;
 }
-.btn-sm:hover {
+.button-small:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
-.btn-sm:active {
+.button-small:active {
   background-color: rgba(0, 0, 0, 0.2);
 }
-.btn-sm svg {
+.button-small svg {
   width: 13px;
   height: 13px;
   vertical-align: bottom;