What you want to do is avoid the Button entirely.
- Create a new View with a Coordinate container as the root.
root.props.mode to “percent”
- Modify the style of the root to approximate the appearance of your desired “default” button. I recommend including a border radius modification and at least a background color.
- Place a Label into the root container, and set position the position to be
x=0, y=0.4, width=0.4, height=0.2. Follow this up with a change to the textAlign property of the Label so that it is aligned to the left.
- Repeat the Label steps for your other desired text positions, modifying the alignment as necessary.
- Create a new Perspective Named Style which contains the desired style changes for when a user hovers over your “button”.
- Create a second named style to be used when a user depresses a mouse button on your button.
- Right click the Root layer of the View and select “Configure Events”.
- Create a onMouseEnter Event and an accompanying Script Action. Configure the script to set
self.props.style.classes to the name of your hover class.
- Create an onMouseExit Event and an accompanying Script Action. Configure this action to set
self.props.style.classes to an empty string (
'') - this will remove the hover class from the previous step when a user leaves the “button”.
- Create an onMouseDown Event and apply your “click” named style to
- Create an onMouseUp Event and set
self.props.style.classes to the hover named style (you don’t want to use the empty string solution here because a user is 99% of the time still going to be hovering over your “button”.
You’ll need to get creative in applying a text size which will update as your element grows, but this percent layout will hold your alignments as the button changes size and allow you to style it as you’d like as well.