For a clear button for to any text entry field/~EditTextWidget (like the search bar has)
STEP 1: While the devs aren't looking, steal the close button code from $:/core/ui/SideBarSegments/search or from below
STEP 2: paste and modify as shown below
__CODE__:
<$button class="tc-btn-rounded" style="margin-left:10px;">
<$action-setfield $tiddler="$:/temp/kbshortsearch" searchterm="" />
{{$:/core/images/close-button}}
</$button>
* The class "tc-btn-rounded" can be omitted for a square bordered button or replaced with "tc-btn-invisble" for no border.
* "searchterm" is a field name and is usually "text" for a temp tiddler's text field. Set it to the field that the ~EditTextWidget is setting and with its black value, the button deletes (clears) the value the ~EditTextWidget had set.
__With a ~EditTextWidget__:
Search: <$edit-text tiddler='$:/temp/kbshortsearch' field='searchterm'/><$button class="tc-btn-rounded" style="margin-left:10px;">
<$action-setfield $tiddler="$:/temp/kbshortsearch" searchterm="" />
{{$:/core/images/close-button}}
</$button>
__WORKING EXAMPLE__:
Search: <$edit-text tiddler='$:/temp/kbshortsearch' field='searchterm'/><$button class="tc-btn-rounded" style="margin-left:10px;">
<$action-setfield $tiddler="$:/temp/kbshortsearch" searchterm="" />
{{$:/core/images/close-button}}
</$button>