TubeSpanner Style Guide

Button: Danger / Remove 

<button class="btn btn-fill btn-remove">
    Delete
</button>
 
<button class="btn {{classes}}{{#if disabled}} disabled{{/if}}" {{#if disabled}}disabled{{/if}}>
  {{label}}
</button>
 
{
  "label": "Delete",
  "classes": "btn-fill btn-remove",
  "disabled": false
}

Uses Bootstrap btn base class. Always combine with a modifier:

  • btn-primary — purple, primary action
  • btn-primary btn-secondary — orange, alternative flow
  • btn-primary btn-light btn-mark — light with purple text, positive secondary (e.g. Mark as done)
  • btn-primary btn-light btn-skip — light with grey text, dismiss action
  • btn-fill btn-remove — red, destructive action

⚠️ btn-primary btn-light alone has no colour override and will render with poor contrast — always add btn-mark or btn-skip.

Appears in: Throughout the app — tool pages, modals (Do Next, upgrade prompts), script pages, settings, Social Bio editor, and any form submission.