Consistent CSS classes for buttons and badges across the web UI.
All buttons use the .btn base class plus a variant and optional size modifier.
<button className="btn btn-primary">Save</button>
<button className="btn btn-secondary btn-sm">Cancel</button>
<button className="btn btn-danger btn-sm">Delete</button>
<button className="btn btn-primary btn-lg">Submit Form</button>
Shared properties applied to all buttons:
| Property |
Value |
| Padding |
0.4rem 0.75rem |
| Border radius |
var(--radius) (8px) |
| Font size |
0.8rem |
| Font family |
var(--font) |
| Font weight |
500 |
| Display |
inline-flex (centered) |
| Transition |
opacity 0.15s, background 0.15s |
| Class |
Use for |
Background |
Color |
Border |
.btn-primary |
Main actions (save, submit, confirm) |
var(--accent) green |
#000 |
none |
.btn-secondary |
Secondary actions (cancel, back, filter) |
var(--bg-card) |
var(--text-muted) |
var(--border) |
.btn-danger |
Destructive actions (delete, clear) |
#7f1d1d |
#fca5a5 |
#ef4444 |
.btn-ghost |
Tertiary/minimal (menu items, dismiss) |
transparent |
var(--text-muted) |
var(--border) |
| Class |
Padding |
Font size |
Width |
.btn-sm |
0.25rem 0.5rem |
0.7rem |
auto |
| (default) |
0.4rem 0.75rem |
0.8rem |
auto |
.btn-lg |
0.625rem 1rem |
0.85rem |
100% |
All handled by CSS — no JS needed:
| State |
Effect |
:hover |
Variant-specific (opacity, background change) |
:disabled |
opacity: 0.45, cursor: not-allowed |
:active |
transform: scale(0.98) |
- Forms: Use
btn btn-primary btn-lg for submit buttons (full width)
- Tables: Use
btn btn-secondary btn-sm for action buttons, btn btn-danger btn-sm for delete
- Modals: Cancel =
btn btn-secondary btn-sm, Confirm = btn btn-primary, Destructive = btn btn-danger btn-sm
- Navigation: Use
btn btn-secondary for prev/next, btn btn-ghost for menu items
- Tabs: Active =
btn btn-primary, Inactive = btn btn-secondary
- For dynamic color buttons (e.g., vote buttons), use
btn btn-lg and set background, color, border via style prop
All badges use the .badge base class plus a variant.
<span className="badge badge-online">active</span>
<span className="badge badge-muted">viewer</span>
<span className="badge badge-accent">Platform Admin</span>
<span className="badge badge-rare">RARE x3</span>
| Property |
Value |
| Padding |
0.1rem 0.4rem |
| Border radius |
9999px (pill) |
| Font size |
0.65rem |
| Font weight |
500 |
| Display |
inline-block |
| Class |
Use for |
Background |
Color |
Border |
.badge-online |
Active, online, confirmed |
var(--accent-dim) |
var(--accent) green |
— |
.badge-offline |
Blocked, offline, error |
#7f1d1d |
var(--danger) red |
— |
.badge-degraded |
Warning, degraded |
#78350f |
var(--warning) yellow |
— |
.badge-muted |
Role labels, neutral info |
var(--bg) |
var(--text-muted) |
var(--border) |
.badge-accent |
Platform admin, special |
var(--accent-dim) |
var(--accent) |
var(--accent) |
.badge-rare |
Rare species |
#1e1b4b |
#8b5cf6 purple |
— |
.badge-danger |
Rejected, errors |
#7f1d1d |
#ef4444 |
— |
- Status:
badge-online (active), badge-offline (blocked), badge-degraded (warning)
- Roles:
badge-muted for tenant roles (viewer, member, admin), badge-accent for platform admin
- Species:
badge-rare for rare detections, badge-online for confirmed, badge-danger for rejected
- Webhooks/workers:
badge-online for active, badge-muted for disabled
| Variable |
Value |
Use |
--bg |
#0f1117 |
Page background |
--bg-card |
#1a1d27 |
Card/panel background |
--bg-hover |
#252833 |
Hover states |
--border |
#2a2d3a |
Borders, dividers |
--text |
#e4e4e7 |
Primary text |
--text-muted |
#9ca3af |
Secondary text, labels |
--accent |
#22c55e |
Green primary accent |
--accent-dim |
#166534 |
Green dim background |
--warning |
#f59e0b |
Yellow warning |
--danger |
#ef4444 |
Red danger |
--info |
#3b82f6 |
Blue info |
--radius |
8px |
Border radius |
--font |
Inter, system-ui, sans-serif |
Primary font |
--mono |
JetBrains Mono, Fira Code, monospace |
Code font |