This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

ButtonWidget

6th April 2017 at 9:57am
Widgets

Introduction

The button widget displays an HTML <button> element that can perform a combination of optional actions when clicked:

  • Executing any ActionWidgets passed in the actions attribute
  • Executing any ActionWidgets that are immediate children of the button widget
  • Execute any integrated actions:
    • Navigate to a specified tiddler
    • Dispatch a user defined widget message
    • Trigger a user defined popup
    • Assign new text to a specified tiddler

The integrated actions are provided as a shortcut for invoking common actions. The same functionality is available via ActionWidgets, with the exception of the support for highlighting selected popups.

Content and Attributes

The content of the <$button> widget is displayed within the button.

AttributeDescription
actionsA string containing ActionWidgets to be triggered when the key combination is detected
toThe title of the tiddler to navigate to
messageThe name of the widget message to send when the button is clicked
paramThe optional parameter to the message
setA TextReference to which a new value will be assigned
setToThe new value to assign to the TextReference identified in the set attribute
selectedClassAn optional additional CSS class to be assigned if the popup is triggered or the tiddler specified in set already has the value specified in setTo
defaultDefault value if set tiddler is missing for testing against setTo to determine selectedClass
popupTitle of a state tiddler for a popup that is toggled when the button is clicked
aria-labelOptional Accessibility label
tooltipOptional tooltip
classAn optional CSS class name to be assigned to the HTML element
styleAn optional CSS style attribute to be assigned to the HTML element
tagAn optional html tag to use instead of the default "button"
dragTiddlerAn optional tiddler title making the button draggable and identifying the payload tiddler. See DraggableWidget for details
dragFilterAn optional filter making the button draggable and identifying the list of payload tiddlers. See DraggableWidget for details

Note: In almost all other cases where a TextReference is used as a widget attribute, it will be placed between curly brackets, to transclude the value currently stored there. However, when we use a TextReference as the value of a button widget's set attribute, we are referencing the storage location itself, rather than the value stored there, so we do not use curly brackets there. Example: we could code a button widget that sets the caption field of TiddlerA to be the same as that of TiddlerB as:

<$button set="TiddlerA!!caption" setTo={{TiddlerB!!caption}} >

Press me!

</$button>

Tip: Set class to tc-btn-invisible tc-tiddlylink to have a button look like an internal link.