Buttons ​

Bootstrap

Bootstrap btn classes. Variants, sizes, and examples below; usage → Rules. Icons: Iconography.

Variants ​

btn-primary, btn-secondary, btn-danger, btn-link, btn-dark (selected/chosen, not dark theme).

html
<button type="button" class="btn btn-primary">New contact</button>
<button type="button" class="btn btn-secondary">Assign owners</button>
<button type="button" class="btn btn-dark">Selected</button>
<button type="button" class="btn btn-danger">Delete contact</button>
<button type="button" class="btn btn-link">View all</button>

Ghost ​

Sqrl custom

btn-ghost — borderless icon/text for row actions and toolbars (not btn-link).

html
<button type="button" class="btn btn-ghost btn-sm" aria-label="Edit">
  <i class="bi bi-pencil" aria-hidden="true"></i>
</button>

Other variants ​

btn-success, btn-warning, btn-info — contextual status, not page CTAs. Prefer btn-secondary over btn-light.

html
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>

Sizes ​

Sqrl custom Bootstrap

btn-xxs, btn-xs, btn-sm, default, btn-lg (22 / 26 / 32 / 36 / 42px control heights; btn-xxs and btn-xs use 11px type and the same horizontal padding). Use btn-xxs / btn-xs for dense toolbars and inline actions; not for primary page CTAs or form fields (form-control-sm stays 32px).

html
<button type="button" class="btn btn-primary btn-xxs">New contact</button>
<button type="button" class="btn btn-primary btn-xs">New contact</button>
<button type="button" class="btn btn-primary btn-sm">New contact</button>
<button type="button" class="btn btn-primary">New contact</button>
<button type="button" class="btn btn-primary btn-lg">New contact</button>

Icon buttons ​

One Bootstrap Icon; icon before label. Icon-only: btn-sm + aria-label.

html
<button type="button" class="btn btn-primary">
  <i class="bi bi-plus-lg me-1"></i>
  New contact
</button>
<button type="button" class="btn btn-secondary btn-sm" aria-label="Search">
  <i class="bi bi-search"></i>
</button>
<button type="button" class="btn btn-ghost btn-sm" aria-label="More">
  <i class="bi bi-three-dots"></i>
</button>

States ​

disabled attribute for inactive actions (theme matches Bootstrap opacity/cursor). No scale or layout shift on interaction.

html
<button type="button" class="btn btn-primary" disabled>Save changes</button>
<button type="button" class="btn btn-secondary" disabled>Assign owners</button>
<button type="button" class="btn btn-dark" disabled>Selected</button>

Rules ​

Hierarchy ​

One btn-primary per view — other actions secondary, ghost, link, or dark (selected).

Labels ​

  • Verb + object, sentence case (“New contact”, “Assign owners”). Not “Submit”, “OK”, or “Click here”.
  • Destructive: name the effect (“Delete contact”).

Icon-only ​

Always aria-label. Pair with tooltip only for extra hint, not essential copy. Flat icons: Iconography.