Section message

Full-width prominent message block with colored border accent and action slots.

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

Verification required

Complete KYC verification to enable higher transaction limits on your account.

Scheduled maintenance

The payment gateway will be unavailable on Sunday 2 AM – 4 AM IST for routine maintenance.

Installation

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

npm install @payglocal_ui/flux-ui

Usage

Import

import { SectionMessage } from "@payglocal_ui/flux-ui";

Example

<SectionMessage
  appearance="warning"
  title="KYC incomplete"
  actions={<Button size="sm">Complete KYC</Button>}
>
  Verify your details to unlock higher limits.
</SectionMessage>