Button - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
<BUTTON/> : <BOX/>
The <BUTTON> or <BTN> widget provides a stylized way for a user to execute an event with a tap/click to perform one or more actions. <BUTTON/> accepts any widgets as children to stylize the widget.
- Buttons have a cooldown of 0.3 seconds to prevent misclicking buy default (see
debouncebelow). - if you need something to be intractable without the button styling or overlay, consider Link
| Name | Type | Default | Description | Req |
|---|---|---|---|---|
| type | string | text | Valid types are "text", "outlined", or "elevated". | |
| label | string | Label is a shortcut to supplying the body of the button. A <BUTTON\> widget can specify a label or can wrap one or more other widgets as its body. |
||
| enabled | bool | true | Disables button onclick if set to false. | |
| debounce | int | 300 | Subsequent button clicks within the specified period are ignored. Time is in milliseconds. Set debounce=0 to disable. |
| Name | Description |
|---|---|
| onclick | A list of ; seperated action(s) to execute when the button is clicked. If not supplied the buttons enabled property is set to false |
Text buttons are the least intrusive button with very simple styling. You can provide a label attribute, a <TEXT/> child or directly insert text as a child.
Elevated buttons are indicative of a 3d button to give a strong indication they are interactable. Tip: You can style an elevated button into a traditional 'FAB' using radius.
Outlined buttons are transparent in the center letting the background through with a thin border. They are good for highlighting an action subtly with a short straightforward text child.
<BUTTON id="elevatedbtn" type="elevated" onclick="elevatedbtn.color.set('random');" radius="36" color="random">
<ICON icon="border_color" color="white" />
Elevated Button
</BUTTON> 
<BUTTON id="outlinedbtn" type="outlined" onclick="{outlinedbtn.type} == 'outlined' ? outlinedbtn.type.set('elevated') : outlinedbtn.type.set('outlined')" radius="36" color="green">
<ICON icon="keyboard_arrow_right" color="lightgreen" />
Outlined Button
</BUTTON>