Skip to Content
0
Jan 23, 2023 at 04:12 PM

How best to make Fiori style buttons?

109 Views

Hi,

I'd like to maintain a consisent UX experience for our users, and for our Persoans dashboard I'd like the buttons to be similar to the buttons used in the Fiori launchpad.
Unfortunately, when I make the transaction buttons square shaped, the text is centre-aligned and doesn't wrap and I can't figure out how to change the text alignment to wrap and be top-aligned:

image.png

So I thought to make the button blank, and then add a seperate wrapping label:
image.png

On top of the button, to display the text, and this looks good:

image.png

But the problem now is that the user can't click on the area that has the wrapping label (outlined in blue above) to access the transaction, and this obviously frustrates the user.
I'm thinking there is probably an easier way to create Fiori style buttons that I am missing.
Does anyone have any useful tips on how to achieve this?

Thanks in advance!

Attachments

image.png (3.1 kB)
image.png (22.9 kB)
image.png (23.2 kB)