Create a Dataverse like ribbon button for a Canvas App

In my private project (Key Box), I’ve created a custom page to edit settings that are stored in an environment variable. To give it the look & feel of Dataverse, it needed a ribbon button to save the settings made. I decided against the awesome Creator Kit because I only required one single button and don’t want to have additional dependencies.

Dataverse like ribbon button

Out of the box buttons in Canvas Apps have no icon. They are text only, except you set an emoji in the text. Therefore, I decided to build my own button with a combination of an icon and a label, that are layered and covered by a transparent button.

Some attributes depend on your preferences, like the height or the position.
Following, you find the main attributes for the button that I used:

Text = ""
Width="ico Save".Width + 'lbl Save'.Width
FillColor = RGBA(1; 1; 1; 0,0)
HoverFillColor = RGBA(0; 0; 0; 0,05)

Original Post https://benjaminjohn.de/create-a-dataverse-like-ribbon-button-for-a-canvas-app