fix(button): align list-variant label with icon line-box

apps/example/e2e/button.spec.ts

@@ -23,4 +23,27 @@ test.describe('buttons', () => {
     await expect(disabledButton).toBeDisabled();
     await expect(disabledButton).toContainText('0');
   });
+
+  test('list-variant button label shares the icon line-box (issue #515)', async ({ page }) => {
+    const button = page.getByTestId('list-button-md-settings');
+    const label = button.locator('[data-id="btn-label"]');
+    const icon = button.locator('svg').first();
+
+    await expect(button).toBeVisible();
+
+    // Label line-height collapses to the md icon size (1.125rem = 18px) so the
+    // label's line-box matches the icon's bounding box; without the fix the
+    // label inherits leading-5 (20px) and visually drifts above the icon.
+    await expect(label).toHaveCSS('line-height', '18px');
+
+    const labelBox = await label.boundingBox();
+    const iconBox = await icon.boundingBox();
+    expect(labelBox).not.toBeNull();
+    expect(iconBox).not.toBeNull();
+
+    // Centers should line up within ~1px now that the line-boxes match.
+    const labelCenter = labelBox!.y + labelBox!.height / 2;
+    const iconCenter = iconBox!.y + iconBox!.height / 2;
+    expect(Math.abs(labelCenter - iconCenter)).toBeLessThanOrEqual(1);
+  });
 });

apps/example/src/components/buttons/ListButtons.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { RuiButton, RuiIcon, type RuiIcons } from '@rotki/ui-library';
+
+interface ListItem {
+  label: string;
+  icon: RuiIcons;
+}
+
+const items: ListItem[] = [
+  { icon: 'lu-settings', label: 'Settings' },
+  { icon: 'lu-user', label: 'Profile' },
+  { icon: 'lu-log-out', label: 'Logout' },
+];
+
+const sizes = ['xs', 'sm', undefined, 'lg', 'xl', '2xl'] as const;
+</script>
+
+<template>
+  <div class="mb-14">
+    <h3 class="text-h6 mb-3">
+      List variant
+    </h3>
+    <div class="grid gap-6 grid-cols-3">
+      <div
+        v-for="size in sizes"
+        :key="size ?? 'md'"
+        class="rounded border border-rui-grey-300 dark:border-rui-grey-700 overflow-hidden w-56"
+        :data-id="`list-button-card-${size ?? 'md'}`"
+      >
+        <div class="px-3 py-2 text-caption text-rui-text-secondary border-b border-rui-grey-200 dark:border-rui-grey-800">
+          size: {{ size ?? 'md (default)' }}
+        </div>
+        <RuiButton
+          v-for="item in items"
+          :key="item.label"
+          variant="list"
+          :size="size"
+          :data-id="`list-button-${size ?? 'md'}-${item.label.toLowerCase()}`"
+        >
+          <template #prepend>
+            <RuiIcon :name="item.icon" />
+          </template>
+          {{ item.label }}
+        </RuiButton>
+      </div>
+    </div>
+  </div>
+</template>

apps/example/src/views/ButtonView.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import ButtonGroups from '@/components/buttons/ButtonGroups.vue';
+import ListButtons from '@/components/buttons/ListButtons.vue';
 import MultiToggleButtonGroups from '@/components/buttons/MultiToggleButtonGroups.vue';
 import SingleButtons from '@/components/buttons/SingleButtons.vue';
 import ToggleButtonGroups from '@/components/buttons/ToggleButtonGroups.vue';
@@ -13,6 +14,7 @@ import ComponentView from '@/components/ComponentView.vue';
     </template>
 
     <SingleButtons />
+    <ListButtons />
     <ButtonGroups />
     <ToggleButtonGroups />
     <MultiToggleButtonGroups />

packages/ui-library/src/components/buttons/button/button-styles.ts

@@ -37,7 +37,13 @@ export const buttonStyles = tv({
       outlined: {},
       text: { root: 'px-2' },
       fab: { root: 'rounded-full py-2' },
-      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full' },
+      // `leading-[1.125rem]` on the label collapses the 20px line-box (inherited
+      // from the root's `leading-5`) down to 18px so it matches the md icon box
+      // (`--rui-icon-size: 1.125rem`). Without it, `flex items-center` centers
+      // the 20px line-box against the 18px icon box and the baseline-aligned
+      // glyphs visually drift above the icon's optical center — most readable
+      // in tight list rows. See rotki/ui-library#515.
+      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full leading-[1.125rem]' },
     },
     size: {
       // Each size variant redefines `--rui-icon-size` on the button so the