How to use the New Icon Button to create Modern PowerApps

In this video, we cover the updated Modern Button Control. Learn how to add icons to buttons as well as other tips and tricks to use the Modern Button Control to create Modern-looking PowerApps
Follow me on LinkedIn: / victorsanwoolu
Video ID: #PP_0016
Table of Contents:
00:00 Intro
00:41 App Intro
01:09 Classic Button Control
02:29 Modern Button Control - Base Structure
05:36 Animated Buttons
09:58 Button Styles and Theme
13:17 Current Limitations
14:52 Specific Fill Modern Buttons
19:43 Transparent Buttons
📥 App and Dataset Download for Members (on KZbin or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!
For Patreon Members: Download links will be available on the Patreon Page
For KZbin Members: Check the membership tab on the channel page for the download links.
🎁Not a member yet. Join the Tolu Victor Community:
Patreon- / toluvictor
KZbin- / @toluvictor
#powerapps #powerplatform #copilot #moderncontrol #crashcourse #canvasapps #ui/ux #uidesign #button #icon

[@SkitReplay]

You are such an inspiration to the Power App world

[@toluvictor]

😊 Thanks

[@akshaynm]

Many thanks Victor for sharing such nice tips and tricks.. 🙏🏻

[@JoseAugustoDeLimaPereira]

Great video! TY!

[@MichaelDeBlasis1369]

Great video!

[@rizkimaul470]

Your videos are amazing!!! By the way, is there anything you need to set up first before you can use this button feature?

[@gosyomei]

I am always amazed by your wonderful UI ideas. Thank you so much! This video was very helpful as well. I can't wait for your next one.

[@toluvictor]

You are welcome! Happy to know you liked the video

[@praveeng3921]

Thanks for information, glad to have this option.

[@toluvictor]

Yeah. It's really cool

[@sibidi894]

I liked the video before I started watching it. Good job! Keep it up.

[@toluvictor]

🙂

[@NKBobcat]

Thank you. Thank you. Thank you!

[@toluvictor]

Lol. You're welcome (×3) 🙂

[@Franklinvaz]

Nice one. As always splendid design. I have already started using this. But there is a problem. We are not getting Tool-tip property. Imagine if you are setting up a button with just an icon, without a tooltip it would be hard for users. How would you solve this?

[@toluvictor]

Yh, that is another limitation. They already added "Accessible Label" property for the screen readers, they might as well just add tooltip.

[@user-vc7go6ln2b]

Hey there! Thanks for all the great info! I found it so useful that I actually subscribed with both my work and personal accounts so I can follow along at work. I have a quick question about the icons in the button. Is there any way to adjust the size of the icons to make them bigger without changing the button size?

[@toluvictor]

Thanks a lot for the support 😊 And Yes, I noticed this bug when doing my Initial testing and planned to call it out in the "Current Limitations" chapter of my video but while recording I discovered the bug has been fixed in the latest PowerApps version. So just change your PowerApps version if it hasn't changed already (3.24062.17 and higher) and do a hard refresh of your browser. After that, the icon should also respond to font size changes regardless of button size

[@joywindsouza817]

How to assign the modern button a specific color of hex value

[@toluvictor]

Hi. Check 16:50 . I showed a "trick" to do this

[@williamsalazar2624]

do you have a course?

[@gabrielcastelblancolopez8520]

Do you know if the design system is already in figma with modern objects?

[@toluvictor]

Hmm. I don't know

[@asjadlakhani8659]

Any suggestions on how to increase height/width of icon inside button? If I increase height/width of button or increase the font size, still icon height/width remains the same so it looks very small compared to higher height/width of button

[@toluvictor]

Yeah I noticed this bug when doing my Initial testing and planned to call it out in the "Current Limitations" chapter of my video but while recording I discovered the bug has been fixed in the latest PowerApps version. So just change your PowerApps version if it hasn't changed already (3.24062.17 and higher) and do a hard refresh of your browser. After that, the icon should also respond to font size changes

[@asjadlakhani8659]

⁠Thank you so much

[@luisfernandomacedo1451]

What a nice trick! If we create a component to be used as pop up, does this mean we can customize our own spinner?

[@toluvictor]

Yeah. Pretty cool

[@sanskritisabhayta]

Pls tolu request to make complete app video

[@toluvictor]

I've planned a complete project walk-through as a future video 👍

[@qoryhanisagal]

Your commentary is 😂😂😂😂😂😂

[@toluvictor]

Noice 😂😂

[@willianrom]

Man, I didn't know that. Thank you very much, hugs from Brazil. 🟩🟨

[@toluvictor]

😊 You're welcome