Buttons
Neomorphic surface base. Glow activates only on interaction. Every variant ships with all states.
Variants
Six visual types for different contexts.
All variants
.btn
Neutral surface, no accent. For secondary actions without semantic weight.
.btn .color-group-primary
Neon orange border. The main CTA in any context.
.btn .color-group-secondary
Cyan border. Supporting actions alongside a primary.
.btn .btn-ghost
Glass background, translucent border. For tertiary or inline actions.
.btn .color-group-danger
Red border. Destructive actions that require user awareness.
Sizes
Three sizes. Compose with any variant.
Small
px-3.5 py-1.5 text-xs
Default
px-5 py-2.5 text-sm
Large
px-7 py-3.5 text-base
States
Hover, focus, pressed and disabled are all handled by CSS. Loading is controlled via .btn-loading.
Disabled
Loading
Add .btn-loading and aria-busy="true" to the button element.
With icons
Icons inherit color from the button variant.
Usage rules
Do
- One primary button per view
- Use ghost for inline or toolbar actions
- Add aria-label when button has no text
- Use btn-loading + aria-busy together
Don't
- Don't stack multiple primary buttons
- Don't use danger for non-destructive actions
- Don't add custom glow to non-interactive buttons
- Don't hide the focus ring