Callout

Prominent inline message for guidance, tips, and contextual information.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Before you begin

Make sure your Tailwind config points @source at the flux-ui package src directory.

New in v2

MetricText, CountrySelect, and Spotlight are now available in this release.

Breaking change

The package scope changed from @flux/ui to @payglocal_ui/flux-ui in v0.2.

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { Callout, CalloutTitle, CalloutText } from "@payglocal_ui/flux-ui";

Example

<Callout variant="info">
  <CalloutTitle>Note</CalloutTitle>
  <CalloutText>Webhook retries are attempted up to 3 times with exponential backoff.</CalloutText>
</Callout>

<Callout variant="warning">
  <CalloutTitle>Action required</CalloutTitle>
  <CalloutText>Complete your KYC to unlock higher transaction limits.</CalloutText>
</Callout>