UI component reference

Actions

Accessible buttons and sticky form actions with host-owned styling and behavior.

@bayonai/ui/actions

LoadingIconButton

An icon button that disables repeat interaction and announces its loading label.

StickyActionFooter

A locally sticky footer for actions inside a scrolling container.

StickySubmitButton

A submit button in a sticky footer, with optional loading state.

DialogActionButtons

A confirm action that supports button and form-submit semantics.

DialogActionProgress

A labelled progress indicator for dialog actions.

DialogCloseButton

A positioned, labelled close action for a host-owned dialog.

Also exported: compactDialogPaperStyle provides native CSS properties for compact dialog surfaces.

Example

import { LoadingIconButton } from '@bayonai/ui/actions';

<LoadingIconButton
  aria-label="Refresh"
  loadingLabel="Refreshing"
  loading={busy}
  onClick={refresh}
>
  ↻
</LoadingIconButton>

Feedback

Communicate status and loading without prescribing a theme.

@bayonai/ui/feedback

StatusNotice

A message with semantic info, success, warning or error tone and optional icon and action.

Loading

A labelled status with four decorative dots; the host supplies color and animation.

Example

import { Loading, StatusNotice } from '@bayonai/ui/feedback';

<StatusNotice tone="success" message="Changes saved." />
<Loading label="Loading results" className="loading-dots" />

Layout

A small native layout primitive that works with host CSS.

@bayonai/ui/layout

Centered

Horizontally centers its children; the host controls spacing and appearance.

Example

import { Centered } from '@bayonai/ui/layout';

<Centered style={{ padding: '2rem' }}>
  <p>All caught up.</p>
</Centered>

Lightbox

A single-action viewer with focus containment and dismissal behavior.

@bayonai/ui/lightbox

Lightbox

A portal dialog that restores focus to its opener and keeps focus on its close control.

Mount only while open, provide both button refs, and use another dialog for content with additional interactive controls. The host supplies media and styling.

Example

import { Lightbox } from '@bayonai/ui/lightbox';

{open && (
  <Lightbox label="Image preview" triggerRef={triggerRef}
    closeRef={closeRef} onClose={() => setOpen(false)}>
    <img src={imageUrl} alt={imageDescription} />
    <button ref={closeRef} onClick={() => setOpen(false)}>Close</button>
  </Lightbox>
)}

Links

Display and interact with validated external destinations.

@bayonai/ui/links

LinkAddressPreview

A native external link showing a destination label and address.

Also exported: useLinkAddressPreview manages preview activation and delegates editing to the host.

Validate destinations before passing them to the preview. The host owns editing and link policy.

Example

import { LinkAddressPreview } from '@bayonai/ui/links';

<LinkAddressPreview link={{
  href: 'https://example.com', label: 'Example', left: 0, top: 0,
}} />

Scroll

Continue paginated content and position sticky elements.

@bayonai/ui/scroll

InfiniteScrollTrigger

Requests more content near the end of a scroll container, with in-flight request protection.

Also exported: useViewportSticky measures a sticky element so tall content can scroll into view before sticking.

The host owns pagination, loading and error states, and an accessible manual load-more fallback.

Example

import { InfiniteScrollTrigger } from '@bayonai/ui/scroll';

<InfiniteScrollTrigger enabled={hasMore} loading={loading}
  onLoadMore={loadMore}>
  <button onClick={loadMore} disabled={loading || !hasMore}>
    Load more
  </button>
</InfiniteScrollTrigger>

Sections

Build controlled expandable sections with native button semantics.

@bayonai/ui/sections

ExpandableSectionToggle

A labelled toggle that exposes its expanded state and optional controlled region.

Example

import { ExpandableSectionToggle } from '@bayonai/ui/sections';

<ExpandableSectionToggle ariaLabel="Toggle details"
  ariaControls="details" expanded={expanded}
  onToggle={() => setExpanded(!expanded)}>
  Details
</ExpandableSectionToggle>
<div id="details" hidden={!expanded}>More information</div>

Swipe

Add a touch gesture while preserving an accessible alternative.

@bayonai/ui/swipe

SwipeActionRow

Detects a swipe-to-delete gesture and delegates deletion to the host.

Also exported: SWIPE_ROW_SWIPE_DELETE_DISTANCE_PX exposes the deletion threshold.

Include a keyboard-accessible delete action in the row; swipe is an additional gesture.

Example

import { SwipeActionRow } from '@bayonai/ui/swipe';

<SwipeActionRow onDelete={removeItem}>
  <span>Item</span>
  <button onClick={removeItem}>Delete</button>
</SwipeActionRow>

Toasts

Show transient feedback with optional actions and dismissal.

@bayonai/ui/toasts

Toast

A status or alert container with placement and optional dismissal.

ActionToast

A toast with a labelled host-owned action.

Also exported: useUpwardToastDismiss and TOAST_UPWARD_DISMISS_DISTANCE_PX expose the upward-dismiss gesture.

Example

import { ActionToast } from '@bayonai/ui/toasts';

<ActionToast message="Item removed" actionLabel="Undo"
  actionAriaLabel="Undo item removal" onAction={undo}
  onDismiss={dismiss} />