NewPower Apps · canvas componentButtons and actions✓ Tested in StudioMIT License
Button
A modern button in four looks, in your brand colour, light or dark. A busy state stops double clicks, and select-again-to-confirm guards actions that can't be undone.
Name in Studio
lcsButton
Version
0.3.1
Properties
10 inputs · 2 outputs · 1 input function · 1 output function · 1 event · 1 action
As it is when you paste it, with every input at its default.
Screen1
Formulas on this screen
Set the same ones in Studio to try it the same way; there, each Notify shows its event in a banner, which this preview leaves out so nothing covers the component. The instance names are the ones Studio gives the first copy on a screen.
A web replica that behaves as the component does in Power Apps. In Studio it uses Microsoft's controls, which can look slightly different.
Add it in five steps
1In Power Apps Studio, open Settings > Updates and check that Modern controls and themes and Enhanced component properties are on.
2Open the Components tab in the tree view and select New component.
3Select an empty part of Studio, so the new component isn't selected.
4Copy the YAML on this page and press Ctrl+V. lcsButton appears with all its properties.
5On a screen, insert it from Insert > Custom > lcsButton.
What it needs
No premium licence: standard controls, no connectors
Modern controls and themes: on
Enhanced component properties: on
Tested in Power Apps Studio 3.26094.9 on October 17, 2026
Version 0.3.1
Properties (16)
Read from the component's own YAML, so they always match what you paste.
Inputs
Property
Kind
Type
Default
Label
The button's text.
Input
Text
"Save"
Appearance
Primary, Secondary, Outline or Subtle.
Input
Text
"Primary"
IconName
A Fluent icon name, such as Checkmark. Leave empty for no icon.
Input
Text
""
IsBusy
While true, the button is disabled and says it's working.
Input
Boolean
false
AccentColor
Your brand colour. Primary buttons use it, and their hover and pressed colours are worked out from it.
Input
Color
RGBA(15, 108, 189, 1)
Theme
Light, or Dark for a dark screen: text and borders turn light, Secondary is drawn as Outline and Subtle as Transparent.
Input
Text
"Light"
RequireConfirm
When true, the first select turns the button red and shows ConfirmLabel; OnClick runs only if it's selected again within ConfirmSeconds.
Input
Boolean
false
ConfirmLabel
What the button says while it waits for the confirming select.
Input
Text
"Select again"
ConfirmSeconds
How long the button waits for the confirming select before it goes back to normal.
Input
Number
4
Motion
When the button starts working (IsBusy), a soft shade sweeps across it once. None plays for people who've asked their device for reduced motion.
Input
Boolean
true
Outputs
Property
Kind
Type
Default
IsArmed
True while the button waits for the confirming select.
Output
Boolean
—
ClickCount
How many times the button was selected since the last ResetCount().
Output
Number
—
Input functions
Property
Kind
Type
Default
FormatLabel(Text)
Lets the app change how the label is shown. Receives the label, returns the text to show.
Text (Text): The label to format.
InputFunction
Text
Text
Output functions
Property
Kind
Type
Default
IsValidLabel(Text)
True when the text is a usable button label: not empty and at most 40 characters.
Text (Text): The label to check.
OutputFunction
Boolean
—
Events
Property
Kind
Type
Default
OnClick(Count)
Runs in the app when the button is selected. Receives the new click count.
Count (Number): The click count, including this click.
Event
—
false
Actions
Property
Kind
Type
Default
ResetCount()
Sets ClickCount back to 0.
Action
—
—
Guide
Use lcsButton wherever people start an action: Save, Submit, Export, Edit. Compared with a plain button, it gives you:
Four looks from one input, Appearance: Primary, Secondary, Outline and Subtle.
Your brand colour from one input, AccentColor. Hover and pressed colours are worked out from it, so any colour looks right.
Light or dark. Set Theme to "Dark" on a dark screen: text and borders turn light.
Select again to confirm. Set RequireConfirm to true for actions that can't be undone. The first select turns the button red and says "Select again"; OnClick runs only if it's selected again within ConfirmSeconds, otherwise it goes back to normal. No dialog to build.
A busy state. Set IsBusy to true while a Patch or flow runs. The button is disabled and says "Working…", so nobody submits twice.
A click count (ClickCount) and an OnClick event that receives it.
Your own label format through FormatLabel, and a ResetCount() action.
The examples call the button on your screen MyButton.
The inner button's AccessibleLabel is the Label, so screen readers announce what it does. Keep labels short and specific: "Save request", not "Click here".
It works with the keyboard: Tab to it, then press Enter or Space.
While busy it's disabled, and its text changes to "Working…", so the state is visible as well as announced. With Motion on (the default), a soft shade sweeps across it once as it starts working, in about a second; none plays for people who've asked their device for reduced motion, and Motion set to false leaves it still, as in 0.2.0.
While it waits for the confirming select, its text and accessible name change to ConfirmLabel and it shows a warning icon, so the state isn't shown by colour alone. Four seconds is the default; give people longer if your users need it.
Pick an AccentColor dark enough for white text (4.5:1). The default blue and most brand blues, purples and greens are.
Function properties (FormatLabel, IsValidLabel) can only use their own parameters, not variables or the component's other properties. That's how Power Apps works.
In a component library, a component can't use AccessAppScope. This one doesn't need it.
The confirm wait uses a timer, and Power Apps Studio runs timers only in preview (F5). In the published app it always runs.
The modern button has no fill colour of its own, so on a dark screen Secondary is drawn as Outline and Subtle as Transparent (Subtle's light hover would hide light text). While busy it's the modern button's own light grey, in both themes.
IconName takes a Fluent icon name, such as Checkmark, Send or Edit. A name the modern button doesn't know shows no icon.
0.3.1: the guide's examples read a text input's Text, as Microsoft documents it (they said Value); the YAML is unchanged, so there's nothing new to paste-test.
0.3.0: motion: a soft shade sweeps across the button once when it starts working (skipped for reduced motion); a Motion input turns it off. With Motion off, it's exactly 0.2.0. Hover, pressed and the confirm step don't move: a picture over the button would take its clicks and hover.
0.2.0:AccentColor and Theme; RequireConfirm, ConfirmLabel, ConfirmSeconds and the IsArmed output.
0.1.0: first version; passed the paste-test in Power Apps Studio 3.26094.8.
Did it work for you?
No ratings yet.Nobody has said it worked in their app yet.
Sign in to rate it or to say it worked in your app.
Comments
LowCodeStacks teamPinned
Welcome! One tip first: the select-again-to-confirm wait runs on a timer, and Power Apps Studio only runs timers in preview (F5). Test it there; in the published app it always runs.
Which look are you using (Primary, Secondary, Outline or Subtle), and in which brand colour? If the paste fails or something behaves differently in your Studio version, tell us here with the version number.