Button

Solid / soft / ghost / outline variants and sizes, a loading state exposing aria-busy, and asChild polymorphism.

Group: Primitives · Import path: @orionshub/lucent/button · Server-safe — renders on the server without a client bundle.

Import

import { Button } from '@orionshub/lucent'
import '@orionshub/lucent/styles.css' // once, at your app root

Examples

Variants

Variants

Show source

export function ButtonVariants() {
  return (
    <div style={row}>
      <Button variant="solid">Solid</Button>
      <Button variant="soft">Soft</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  )
}

Loading & sizes

Loading & sizes

Show source

export function ButtonLoading() {
  return (
    <div style={row}>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
      <Button loading>Loading</Button>
      <Button startIcon={<PlusIcon />}>With icon</Button>
    </div>
  )
}

Props

Prop	Type	Default	Description
asChild	boolean | undefined	—	Render the single child element instead of a <button> (via Slot).
endIcon	React.ReactNode	—	Icon rendered after the label (aria-hidden).
loading	boolean | undefined	—	Loading state — sets aria-busy, renders a spinner, disables interaction.
size	"sm" | "md" | "lg" | undefined	—	Size. Defaults to `md`.
startIcon	React.ReactNode	—	Icon rendered before the label (aria-hidden).
variant	"solid" | "soft" | "ghost" | "outline" | undefined	—	Visual style. Defaults to `solid`.

Guidance

One-time CSS import

Import the compiled stylesheet once at your app root: import '@orionshub/lucent/styles.css'. Components ship stable class names and read design tokens from CSS custom properties — there is no style runtime. See CSS Import.

Transparency & solid mode

Every glass surface reads --lucent-glass-opacity (0.60–1.0). Dial it at runtime with setGlassOpacity(), or switch to setContrast('solid') for a fully opaque, high-contrast rendering. See Transparency & Solid Mode.

RTL

Authored with CSS logical properties — set dir="rtl" on a parent (or the document) and layout mirrors with no JS. Toggle RTL from the glass-controls panel to preview. See RTL Support.

SSR / Next.js

Server-safe — renders on the server without a client bundle. All components are safe to import in a Server Component tree; interactive ones carry their own "use client" boundary. See SSR & Next.js.