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.

Restrictions:

  • Buttons have a cooldown of 0.3 seconds to prevent misclicking buy default (see debounce below).
  • if you need something to be intractable without the button styling or overlay, consider Link

Attributes

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.

Events

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

Button Types

Text

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

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

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.

Examples

(Elevated Button)

Elevated Button

<BUTTON id="elevatedbtn" type="elevated" onclick="elevatedbtn.color.set('random');" radius="36" color="random">
    <ICON icon="border_color" color="white" />
    Elevated Button
</BUTTON> 

(Outlined Button)

Outlined 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>

logo See it in Action

Other Links You May Find Useful:

⚠️ **GitHub.com Fallback** ⚠️