Buttons

The full catalog — settle the final button style here
Favorite projects
Manage favorites
Notifications
Nothing new yet.
Avatar
Andrei
andrei@example.com
Administrator
Quick settings
Profile Settings

Solid — the full Bootstrap suite

Outline

Contrast — .btn-contrast: theme-adaptive (dark here, light on the dark theme — toggle the theme to see it swap)

Soft — .btn-soft-*: subtle bg + emphasis text, theme-adaptive (framework class; hover steps up a tint)

Soft outline — .btn-soft-outline-*: emphasis text + subtle border, hover fills with the subtle bg

Shapes — radius from $radius-base / pill / square

Sizes — .btn-xs (framework class, works with every variant) → .btn-lg

States — disabled, active, loading

With icons — leading, trailing, icon-only, round

Groups — btn-group, segmented choice; SOLID or soft only, never outline (the shared internal borders read badly)

Block — full width (auth pages, mobile)

Notes for the decision

  • Shape and sizing ride the control panel: $btn-padding-*, $btn-font-weight (500), radius from $radius-base — change once, every button follows (foundation.md).
  • The Soft row is ADOPTED (Andrei, 2026-07-19): .btn-soft-* is a real framework family (frontend/scss/components/_buttons.scss) — subtle bg + emphasis text on the theme-aware vars, hover steps up to the border-subtle tint, active mixes in the solid color.
  • .btn-contrast IS a framework class (frontend/scss/components/_buttons.scss): the two looks swap on data-bs-theme, hover/active built exactly like Bootstrap's own dark (tint) and light (shade). Usage rules at /standards/ui.
  • Outline buttons never enter a .btn-group (Andrei, 2026-07-19): the shared internal borders read badly — grouped buttons are SOLID, a segmented btn-check rides .btn-soft-secondary (the checked state comes free from the soft active vars). Real pagination is the lister's .pagination component, not a btn-group.
  • What the app actually USES day to day is the narrow set with rules at /standards/ui (one primary per zone, SOLID .btn-secondary as THE secondary — Andrei, 2026-07-18 — danger via dialog) — this catalog exists to pick how those look, not to widen usage.