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.
A <BUTTON> has a cooldown of 0.3 seconds to prevent multiple clicks within the period (see debounce below).
| Name | Type | Default | Description | Req |
|---|---|---|---|---|
| type | string | text | Valid types are text, outlined, or elevated | |
| label | string | This is a shortcut to supplying a simple <TEXT/> widget as the body. A <BUTTON> widget can specify a label or can contain other child widgets | ||
| enabled | bool | true | Set the button state. If false, the button's onclick event id disabled | |
| 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 ; separated event's to evaluate and execute when the button is clicked. If not supplied the buttons enabled property is automatically 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 label="Text Button" onclick="toast('Clicked!', 1)" radius="36" color="orange" />
<BUTTON id="elevatedbtn" color="red" type="elevated" enabled="true" onclick="elevatedbtn.color.set('random');" radius="36">
<TXT value="Elevated"/>
</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>