Sophic Interface Systems
Components

Info Callout

An info icon that opens a short modal with a title and a description.

Payment reference

You might be looking for:

  • Tooltip

    A short hover or focus label — no interactive content.

  • Hover Card

    A richer preview on hover — name, type, extra lines.

  • Popover

    Click to open a surface with interactive content.

  • Toast

    A short message that appears, then dismisses itself.

Usage

import { InfoCallout } from "@sophic/portal-ui/components/ui/info-callout";
<span className="inline-flex items-center gap-1.5">
  Payment reference
  <InfoCallout
    title="Where to enter the reference"
    description="In your bank, the field may be called Reference, Description or Remittance message."
  />
</span>

Use this when a label needs a sentence or two of explanation. The icon opens a modal. It is not a hover label.

Props

Prop

Type

Default

Changelog

  • 30 September 2026 — “You might be looking for” includes Toast. Full notes
  • 25 September 2026 — Info icon and explanation modal. Full notes

Hover Card

A richer preview that opens on hover or focus — more than a tooltip label.

Input Group

An input with icons, text, or buttons attached to it.

On this page

You might be looking for:UsagePropsChangelog