Feedback

Components

Alert

Display contextual messages using color, icon, and text. The component is Alert (with AlertTitle, AlertDescription, and AlertAction sub-components).

• Never use color alone to communicate status
• Include a descriptive icon and text label
• Place near the relevant content or at the top of the page

Note

Contextual callout for tips, guidance, and cautionary information within content.

• Left border accent (3px) with variant-specific color
• Subtle background tint for visual grouping
• Supports optional title for structured callouts
• Lighter weight than Notice/Alert — used inline within content, not as page-level feedback

• Title is optional — description-only Notes are valid for brief callouts
• Icon can be overridden or hidden with icon={false}
• Rendered as <aside role="note"> for semantic clarity

Error message

Show a specific validation error for a form field.

• Appears below the input field
• Associated with the input via aria-describedby
• Uses red color + text description
• Visible immediately on validation failure

Details

Expandable content block for supplementary information.

• Used for fee breakdowns, additional context, and optional content
• Chevron indicator shows expand/collapse state
• Animates open and closed smoothly
• Built on the Accordion component with accessible keyboard support

Dialog anatomy

Visual breakdown of the dialog component's internal structure.

Dialog

Modal overlay that blocks interaction with the page behind.

• Used for confirmations, destructive actions, and focused tasks
• Requires a clear title and description
• Always provide a cancel/close action
• Focus is trapped within the dialog while open
• Closes on Escape key or overlay click

Tooltip

Small hint that appears on hover or keyboard focus.

• Used for supplementary information (e.g., fee explanations)
• Should not contain essential information
• Positioned automatically to avoid viewport overflow

Interaction requirements

• Must show on both :hover and :focus (never hover-only)
• Persists for minimum 1.5 seconds after trigger
• Dismisses on Escape key press
• Content must be hoverable (user can mouse over the tooltip itself)
• Touch devices: show on long-press, dismiss on tap elsewhere

Toast

Transient notification that appears briefly and auto-dismisses.

• Used to confirm completed actions (e.g., "Transfer sent")
• Error toasts persist until manually dismissed
• Positioned at the bottom of the viewport
• Supports success, error, and neutral variants

Progress

Visual bar showing task completion percentage.

• Used for uploads, transfer progress, and loading states
• Pair with a text label showing percentage or step
• Supports determinate (percentage) and indeterminate (loading) modes
• Color indicates status: primary for in-progress, green for complete

Skeleton

Placeholder shimmer that mimics the shape of loading content.

• Used while data is being fetched
• Matches the layout of the final content to prevent layout shift
• Replaces spinners for structured content areas
• Includes circular (avatar), rectangular (text), and card shapes

Inline loading

Small spinner for in-place loading indicators within content or controls.

• Used when: fetching exchange rates, verifying recipient details, checking balances
• Appears inside buttons, beside text labels, or within table cells
• States: loading (spinner), success (checkmark transition), error (retry)
• Spinner size matches the context (14px inside buttons, 16px beside text)
• Accessible: uses aria-live="polite" to announce state changes
• Does not block user interaction with other page elements

Design and accessibility

• Alerts use color, icon, and text to communicate status (not color alone)
• Error summaries appear at the top of the page and link to each error
• Error messages are associated with their input via aria-describedby
• Details component uses native disclosure pattern
• Dynamic feedback uses aria-live regions for screen reader announcement
• Focus moves to error summary when form submission fails
• Dialog traps focus and returns it on close

Related patterns

• Validation
• Forms