Button

Solora's button component ships with six semantic variants, four sizes, a disabled state, and beautiful dark mode support — all driven by CSS variables.

Variants

Choose the variant that matches the action's importance and context.

<button class="btn btn-primary btn-md">Primary</button>
<button class="btn btn-secondary btn-md">Secondary</button>
<button class="btn btn-success btn-md">Success</button>
<button class="btn btn-warning btn-md">Warning</button>
<button class="btn btn-danger btn-md">Danger</button>
<button class="btn btn-glass btn-md">Glass</button>

Sizes

Four sizes cover every use case from inline actions to large CTAs.

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-md">Medium</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-xl">X-Large</button>

Disabled State

Add class disabled (or the HTML disabled attribute) to indicate an unavailable action.

<button class="btn btn-primary btn-md disabled">Disabled</button>
<!-- or using native disabled attribute -->
<button class="btn btn-primary btn-md" disabled>Disabled</button>

Glass Button

The btn-glass variant uses backdrop blur for a frosted-glass effect. It adapts cleanly to any background — particularly striking on image or gradient backgrounds.

⚠️ Performance note backdrop-filter can be GPU-intensive. Avoid using many glass buttons simultaneously on pages with complex backgrounds.

API

Class	Type	Description
`btn`	Required	Base button styles (always include)
`btn-primary`	Variant	Blue brand action
`btn-secondary`	Variant	Subtle outlined style
`btn-success`	Variant	Positive action
`btn-warning`	Variant	Caution action
`btn-danger`	Variant	Destructive action
`btn-glass`	Variant	Frosted glass effect
`btn-sm`	Size	Small (0.9375rem)
`btn-md`	Size	Medium (1rem) — default
`btn-lg`	Size	Large (1.0625rem)
`btn-xl`	Size	Extra large (1.3125rem)
`disabled`	State	Reduces opacity, disables pointer events

Accessibility

♿ Best practices Always use <button> elements for actions (not <div> or <a>). For icon-only buttons, add aria-label="Description". Use the native disabled attribute instead of the CSS class when the button is truly non-interactive, so assistive technologies can detect it.