Callout

A tinted note/alert surface; role="alert" for live tones vs a static informational note.

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

Import

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

Examples

Tones

Tones

Show source

export function CalloutBasic() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 340 }}>
      <Callout tone="info">A neutral, static note.</Callout>
      <Callout tone="success">Saved successfully.</Callout>
      <Callout tone="danger" urgent>Something went wrong (role=alert).</Callout>
    </div>
  )
}

Props

Prop	Type	Default	Description
icon	React.ReactNode	—	Optional leading icon (decorative — rendered aria-hidden).
tone	CalloutTone | undefined	—	Semantic tone. Defaults to `info`.
urgent	boolean | undefined	—	When true, announce live via role="alert".

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.