אפשר להוסיף לחצן או תווית בכל מקום שאפשר להוסיף בלוק בארגז הכלים.

JSON
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type":"logic_operation"
},
{
"kind": "label",
"text": "A label",
"web-class": "myLabelStyle"
},
{
"kind": "label",
"text": "Another label"
},
{
"kind": "block",
"type": "logic_negate"
},
{
"kind": "button",
"text": "A button",
"callbackKey": "myFirstButtonPressed"
},
{
"kind": "block",
"type": "logic_boolean"
}
]
}
XML
<xml id="toolbox" style="display: none">
<block type="logic_operation"></block>
<label text="A label" web-class="myLabelStyle"></label>
<label text="Another label"></label>
<block type="logic_negate"></block>
<button text="A button" callbackKey="myFirstButtonPressed"></button>
<block type="logic_boolean"></block>
</xml>
<style>
.myLabelStyle>.blocklyFlyoutLabelText {
font-style: italic;
fill: green;
}
</style>
אפשר לציין שם של מחלקת CSS שיוחל על הלחצן או על התווית. בדוגמה שלמעלה, התווית הראשונה משתמשת בסגנון מותאם אישית, ואילו התווית השנייה משתמשת בסגנון ברירת המחדל.
ללחצנים צריכות להיות פונקציות של התקשרות חזרה, אבל לא לתוויות. כדי להגדיר את הקריאה החוזרת (callback) ללחיצה על לחצן מסוים, משתמשים ב
yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).
הפונקציה צריכה לקבל כארגומנט את הלחצן שעליו לחצו. הלחצן 'יצירת משתנה...' בקטגוריית המשתנים הוא דוגמה טובה ללחצן עם קריאה חוזרת.