nextcloud-libraries/nextcloud-vue

[NcActionButton] Inconsistent icon position

Opened this issue · 4 comments

#icon slot is centered and icon-class is on top.

image

@nextcloud-libraries/designers what position is preferred?

I prefer the second one (vertically centered). That said, IMO, it's not a bug.

Although I also prefer center aligned when there's only one line of text, I think that the better strategy for this component is to top align given that it accepts multiple lines of text. When there are multiple lines of text, the icon gets further and further away from the title.

Here's a real world example of top aligned. @ShGKme note that in your screenshot the icon is not properly centered with the text.

Screenshot 2024-02-22 at 09 59 12

Yep, confirming what @marcoambrosini said, it's better to have it aligned to the top, with the heading. Otherwise the icon is basically at an arbitrary position.