SpeechBubble

Examples #

'use client';

import { SpeechBubble } from '@coreux/ui';

export default function Default() {
  return (
    <figure style={{ margin: 0, boxSizing: 'border-box', width: 600, padding: 32, background: '#F4F1E9', color: '#0B1221' }}>
      {/* Keep at least 15 px clear around the bubble for its outward-pointing tail. */}
      <SpeechBubble body={'Clarity drives\nbetter outcomes.'} tailSide="bottom" />
      <figcaption style={{ marginTop: 32, fontFamily: 'Switzer, sans-serif', fontSize: 14, lineHeight: 1.5 }}>
        Illustrative editorial note, with a centered bottom tail.
      </figcaption>
    </figure>
  );
}

Usage #

Use SpeechBubble for a short spoken-style note or question. Default keeps the two-line bottom-tail seed; TailLeft preserves the full one-line discovery prompt. OnDark retains the founder-note seed and adds start alignment. TailRight adds a two-line end-aligned note, completing all four sides and all three alignments.

Write explicit line breaks for the intended reading rhythm. Place the bubble and the subject it refers to in your own layout, with enough clearance around the tail. Changing tailSide does not locate or attach to another element.

Use Capsule for compact inline labels and RichTextOverlay for large display statements. A speech shape alone does not imply a real quotation or identify a speaker; the examples use explicitly illustrative copy.

Text & geometry limits #

body must be one non-blank string with at most 3 explicit LF or CRLF lines. Each line may contain at most 32 Unicode code points, including spaces, counted with [...line].length. Empty internal lines are accepted, but nested React content is rejected. Multi-code-point emoji can count as several characters.

The body uses whiteSpace: pre: it preserves spaces and line breaks and never wraps automatically. Text is 24 px Switzer at weight 500 and line-height 1.25. The shell is fit-content with maxWidth: 520 px; that maximum does not make a long valid line wrap or guarantee it fits. Choose deliberate line breaks and inspect the actual words.

tailSide accepts top, right, bottom, or left. tailAlign accepts start, center, or end. For top/bottom edges, alignment is measured horizontally; for left/right, vertically. start is 34 px from the beginning, center 50%, and end 34 px from the far end. Placement uses physical left/top coordinates, not automatic right-to-left mirroring.

The tail projects 15 px beyond the selected edge. Top/bottom tails are 30 × 18 px and left/right tails 18 × 30 px. Keep surrounding overflow visible and reserve at least 15 px of clearance; these examples use 32 px padding and space before the caption. There is no collision detection or automatic tail flipping.

fieldMode accepts light or dark; tone accepts neutral, accent, muted, positive, warning, or error. Unsupported variants throw. The bubble paints its surface, text, and border; its surrounding field still belongs to the copied wrapper.

Progress props default to 1 for the completed presentation. Finite inputs clamp to 0–1; NaN and infinities throw. They are scalar controls, not an animation scheduler. Keep the settled defaults for static documentation; respect reduced-motion preferences if you animate them in an application.

Props #

Accessibility & layout #

The body and shell use divs. The tail SVG is already aria-hidden. There is no blockquote, dialog, tooltip, live-region, or speaker attribution semantics, and no general HTML-prop forwarding. Use a real blockquote/cite around a genuine quotation, and provide its source; use a descriptive caption for an illustrative annotation.

Meaning must remain clear without tail position or color. A static positive note does not announce a state change. If your use case is an interactive tooltip or chat interface, supply the appropriate behavior and semantics separately.

The copied 600 px wrappers reserve space for the original seed text and tails. Fit to canvas scales that composition; Actual size gives contained scrolling. The component never wraps body text at a breakpoint. For smaller real layouts, author shorter explicit lines and check the tail clearance again.

See Color for structural and semantic roles. Check contrast against the actual field and preserve written labels alongside color.

Consumer setup #

Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.

Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.

The quick start walks through a copied StatBlock in a minimal app.

Source & revision #

This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.

Revision and upgrade notes · Contribution and coverage guide