Social Buttons
Bootstrap 5.3 .btn patterns extended with brand fills, outlines, icon-only shapes, OAuth rows, share dropdowns, and store tiles. Scoped class .social-page-bs5 + .social-brand-btn / .social-icon-btn keep theme tokens and data-bs-theme predictable — use the navbar toggle to preview light and dark.
Accessibility
Give every control an accessible name: visible text, aria-label on icon-only buttons, or title paired with tooltips only as a supplement. For “Continue with …” flows, keep focus order logical and avoid disabling native focus rings.
Solid brand · default size
Full-width labels
Official-style hues; hover brightens slightly. Pair with rounded-pill or default radius.
Scale
Small · default · large
Bootstrap size utilities on the same brand skin.
Outline 2px
Brand borders
Use on light cards; in dark mode X/GitHub use emphasis/border tokens.
Subtle surfaces
bg-*-subtle + icons
Softer than full brand blocks; works well in settings and footers.
Effects
Glass & gradient ring
Glass uses backdrop-filter; ring uses double background clip.
OAuth-style
Continue with …
Full-width actions inside a narrow column — typical sign-in modal body.
List group
Stacked providers
Counts & state
Pills with metrics
Vertical
Side rail
Store badges
Market tiles
Bootstrap-native flex tiles; icons use Font Awesome brands.
Article teaser
Footer strip pattern for blog cards.